css3英文文字换行,超过两行...展示
要在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等。其他浏览器可能不支持此属性,因此请确保在使用时考虑兼容性问题。
评论已关闭