css设置两行文本省略号
时间: 2023-11-08 09:53:29 浏览: 93
CSS文本超出2行就隐藏并且显示省略号
5星 · 资源好评率100%
要设置两行文本的省略号,可以使用CSS的-webkit-line-clamp属性。此属性需要与display、-webkit-box-orient和line-height属性一起使用。具体的代码如下所示:
```
<style>
.two-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5; /* 根据实际情况调整行高 */
}
</style>
<div class="two-line-ellipsis">
这里是两行文本内容。
</div>
```
上述代码中,将文本内容包裹在一个带有class为"two-line-ellipsis"的div元素中。通过设置该div的样式,即可实现两行文本的省略号效果。
阅读全文