CSS 单行、多行文本溢出显示省略号
<---记录贴--->
HTML部分
<div class="overhidden">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias odit quos aut itaque nulla explicabo vitae voluptate dolor autem quaerat magni animi veritatis facilis, facere esse consequuntur porro ullam omnis.</div>
CSS部分
单行文本
.overhidden{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
效果如图:
![](https://img2020.cnblogs.com/blog/2525080/202108/2525080-20210831164120917-313510839.png)
多行文本
.overhidden {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
效果如图:
![](https://img2020.cnblogs.com/blog/2525080/202108/2525080-20210831164045699-92591653.png)