css文字超出2行显示...
时间: 2023-12-21 21:22:32 浏览: 165
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
要实现CSS文字超出2行显示省略号,可以使用以下代码:
```
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
```
这段代码使用了弹性盒模型,将元素显示为块级元素,并将垂直方向排列。通过设置`-webkit-line-clamp`属性为2,可以限制文字只显示2行。当文字超出2行时,将隐藏超出部分,并在结尾处显示省略号。同时,还需设置`overflow`和`text-overflow`属性来处理超出部分的隐藏和省略号的显示。
请注意,这段代码在不同浏览器中的兼容性可能会有所差异,因为它使用了WebKit前缀。如果需要在其他浏览器中使用,可以添加对应的前缀或使用不带前缀的标准属性。
阅读全文