css 文本超出2行就隐藏并且显示省略号

发布网友发布时间：2024-10-23 05:42

共1个回答

热心网友时间：2024-11-03 20:27

解决CSS文本超出2行显示省略号的步骤是使用基础属性overflow、text-overflow和white-space，结合css3的display和-line-clamp属性。

具体来说，首先应用overflow:hidden，文本超出范围将被隐藏。接着，使用text-overflow:ellipsis以省略号形式显示超出部分。由于white-space:nowrap不支持多行文本，因此不需要将其包含在内。

引入css3后，将对象设为弹性伸缩盒子模型使用display:-webkit-box，这使得元素可以被垂直排列。设置-webkit-box-orient为vertical，意味着子元素将按照垂直方向排列。最后，通过设置-webkit-line-clamp:2，可以控制文本最多显示两行，行与行之间以省略号隔开。

综合应用以上CSS属性，可以轻松实现文本超出2行自动隐藏并显示省略号的效果，完美解决了该问题。