文字溢出省略
作者：互联网
单行省略
display: block; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;
多行省略
overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
小示例
<style>
.dan{
font-size:14px;
color:#000000;
line-height:40px;
height: 40px;
width:300px;
background:pink;
/* 单行省略 */
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.duo{
height:120px;
width:300px;
background:pink;
line-height:40px;
margin-top:20px;
/* 多行省略 */
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
</style>
<body>
<div class="dan">这个是单行省略这个是单行省略这个是单行省略这个是单行省略</div>
<div class="duo">这个是多行省略这个是多行省略这个是多行省略这个是多行省略这个是多行省略这个是多行省略这个是多行省略这个是多行省略咋回事儿咋回事儿咋回事儿</div>
</body>
</html>
标签：文字,省略,行省,text,单行,webkit,overflow,溢出 来源： https://www.cnblogs.com/xiaoyu2/p/12447297.html