css实现多行显示省略号
CSS可以通过以下属性实现多行文本显示省略号:
-webkit-line-clamp
属性:这个属性可以让文本在指定的行数后自动省略并显示省略号。display: -webkit-box
属性:与-webkit-line-clamp
一起使用,可以确保文本在指定的行数后显示省略号。overflow: hidden
属性:隐藏溢出的内容。-webkit-box-orient: vertical
属性:与display: -webkit-box
一起使用,设置盒子的子元素排列方向。
以下是实现多行显示省略号的CSS样式代码示例:
.multiline-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* 控制显示的行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
在HTML中使用该样式:
<div class="multiline-ellipsis">
这里是一段很长的文本,需要显示为多行,并且在超出指定行数后显示省略号。
</div>
注意:-webkit-line-clamp
属性是非标准属性,主要适用于基于WebKit浏览器的系统,如Chrome、Safari等。
评论已关闭