CSS 这个就叫优雅 | 多行文本溢出省略
在CSS中，可以使用以下的方法来实现多行文本溢出显示省略号：
.ellipsis {
overflow: hidden; /* 确保文本溢出容器时被隐藏 */
display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
-webkit-line-clamp: 3; /* 限制在3行 */
-webkit-box-orient: vertical; /* 垂直排列盒子 */
text-overflow: ellipsis; /* 多行时显示省略符号 */
white-space: normal; /* 使用正常的白空格处理方式，允许换行 */
max-height: 4.5em; /* 最大高度为行高的4.5倍，3行 * 行高 */
line-height: 1.5em; /* 设置行高 */
}在HTML中使用该样式：
<div class="ellipsis">
这里是一段很长的文本，如果超出了指定的行数将会显示为省略号...
</div>这段代码将确保当文本超过三行时，多出的文本会被隐藏并以省略号显示。-webkit-line-clamp属性是非标准属性，主要用于WebKit引擎的浏览器，但大多数现代浏览器都支持该属性。
评论已关闭