css两行溢出显示省略号
时间: 2023-08-25 13:05:30 浏览: 118
CSS实现单行、多行文本溢出显示省略号的实现方法.pdf
要实现CSS中的两行溢出显示省略号,你可以使用以下的CSS样式:
```css
.two-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 2; /* 显示两行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
```
然后,将这个样式应用到你想要实现两行溢出显示省略号的元素上,例如:
```html
<div class="two-line-ellipsis">
这是一个超过两行的文本内容,当内容过多时,将会溢出并显示省略号。
</div>
```
这样,当文本内容超过两行时,其余部分将被隐藏,并以省略号(...)表示。
阅读全文