在CSS中实现文本超出2行时显示省略号可以使用text-overflow和white-space属性结合使用。具体的写法如下：
```css
.two-lines-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal !important;
}
```
上述代码中，我们首先将元素的display属性设置为-webkit-box，这是为了实现多行文本的效果。然后使用-webkit-box-orient属性将文本的排列方向设置为垂直方向。接着，使用-webkit-line-clamp属性将文本的行数限制为2行。通过设置overflow属性为hidden，超出的部分将被隐藏。*，将text-overflow属性设置为ellipsis，以显示省略号。为了兼容更多的浏览器，我们还可以将对应的样式加上后缀-ms-，-moz-和-o-。
如果你想要将这段代码应用到某个具体的元素上，只需要在该元素的class属性中添加"two-lines-ellipsis"即可，如下所示：
```html
这是一段超过2行的文本。这是一段超过2行的文本。这是一段超过2行的文本。这是一段超过2行的文本。这是一段超过2行的文本。这是一段超过2行的文本。
```
需要注意的是，以上代码只在高版本的webkit内核浏览器中生效，如果需要兼容更多浏览器，可以使用相关的前缀来实现。另外，该方法也仅适用于固定高度的容器。如果容器高度是根据内容自适应的，可能需要使用JavaScript来实现更复杂的处理。
咨询微信客服
0516-6662 4183
立即获取方案或咨询
top
