css实现多行显示省略号

在 CSS 中，要实现多行文本的省略号显示，需要使用-webkit-line-clamp属性，该属性并不是CSS 规范中的属性，它是WebKit提供的一个扩展属性。利用该属性实现多行文本的省略号显示，需要配合其他三个属性：display: -webkit-box、-webkit-box-orient、text-overflow: ellipsis。其中，-webkit-line-clamp设置块元素包含的文本行数；display: -webkit-box设置块元素的布局为伸缩布局；-webkit-box-orient设置伸缩项的布局方向；text-overflow: ellipsis则表示超出盒子的部分使用省略号表示。示例如下：

.text-container {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
}

在上述代码中，文字容器会被限制在指定的宽度和高度范围内，并且超出范围的文字会被隐藏，超出行数的文字会被省略号代替。其中，-webkit-line-clamp: 2表示块元素中最多显示两行文本，你可以根据自己的需求进行调整。

鹏仔前端 https://www.pjxi.com/