css文字超出用省略号显示
单行文字
//1.文字默认超出换行显示(默认normal自动换行),所以我们要强制一行显示
white-space: nowrap;
//2.超出部分隐藏
overflow: hidden;
//3.用省略号代替超出文本
text-overflow: ellipsis;
多行文字
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
//限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
注意:只是指明行数超出文本用省略号省略,下面举个例子说明一下
例如:
.box {
width: 200px;
height: 80px;
background-color: pink;
}
<div class="box">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
显示结果如下
![](https://i-blog.csdnimg.cn/blog_migrate/75562d994d903ebc85d6d3d3870876fb.png)
加上多行文字省略代码后
.box {
width: 200px;
height: 80px;
background-color: pink;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
结果变成这样了,只是第二行文字出行省略号,第三行不会消失
![](https://i-blog.csdnimg.cn/blog_migrate/a1caea61ba5c22037715fdaf612956c4.png)
要想第三行消失,我们通常改变盒子的高度,将第三行溢出隐藏