【css技巧】文本超出两行显示省略号
为了在CSS中实现文本超出两行显示省略号的效果，可以使用-webkit-line-clamp属性结合display: -webkit-box和-webkit-box-orient: vertical。以下是实现该效果的CSS代码示例：
.ellipsis-multiline {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}在HTML中使用该类：
<div class="ellipsis-multiline">
这里是一段很长的文本，如果超出两行将会显示为省略号。这样可以保持布局的整洁，同时用户可以看到完整内容的一部分。
</div>注意：-webkit-line-clamp属性是非标准属性，主要用于WebKit引擎的浏览器，如Chrome、Safari等。其他浏览器可能不支持此属性，因此请确保在使用时考虑兼容性。
评论已关闭