1.文本单行溢出使用省略号显示
![](https://i-blog.csdnimg.cn/blog_migrate/b552a107b6fb51d6fd59d31bfe1a61f0.png)
关键代码如下:
.box1{
width: 200px;
height: 30px;
line-height: 30px;
margin: 0 auto;
background-color: rgba(220, 220, 220, 0.751);
/* 单行文本超出隐藏 用省略号代替 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2.文本多行溢出使用省略号显示
![](https://i-blog.csdnimg.cn/blog_migrate/40e6c016821bd356a4bf0802fff1191d.png)
关键代码如下:
.box2{
width: 200px;
height: 60px;
line-height: 30px;
margin: 0 auto;
background-color: rgba(220, 220, 220, 0.751);
/* 多行文本超出隐藏 用省略号代替 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
总结:以上就是处理文本溢出使用省略号显示的方法,希望对大家有所帮助!