您的位置：首页 > Web前端 > CSS

css text-overflow

2015-07-15 22:03 691 查看

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>text-overflow</title>
<meta name="author" content="老僧" />
<style>
.ellipsis{
white-space:nowrap;
width:100px;
text-overflow:ellipsis;
display:block;
border:1px solid #CC0000;
overflow:hidden;
}
.clip{
white-space:nowrap;
width:100px;
text-overflow:clip;
display:block;
border:1px solid #CC0000;
overflow:hidden;
}
.desc{
width:500px;
height:200px;
border:1px solid;
border-color:rey;
background-color:yellow;

}
.center{
margin:auto;
background:#CCFF00;
border:1px solid;
width:1000px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-500px;
}
</style>
</head>
<body>
<div class="center">
<div>
<p>我爱北京天安门，天安门上太阳升</p>
<p>超出部分影藏+...</p>
<p class="ellipsis">我爱北京天安门，天安门上太阳升</p>
<p>超出部分影藏</p>
<p class="clip">我爱北京天安门，天安门上太阳升</p>
</div>
<div class="desc">
text-overflow 两个属性
clip 只影藏
ellipsis 影藏+...
和overflow:hidden 超出影藏
white-space:nowrap 不折行
联用
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html javascript

相关文章推荐

新的分享

章节导航