css文本两行溢出省略号
时间: 2023-11-07 09:57:26 浏览: 255
css多行文本溢出时出现省略号的示例
5星 · 资源好评率100%
CSS文本两行溢出省略号可以通过使用CSS3的属性来实现。首先,设置文本容器的宽度,并将超出部分隐藏。然后,使用`text-overflow: ellipsis;`属性来显示省略号。接下来,使用`display: -webkit-box;`属性将文本容器转换为弹性盒模型,并使用`-webkit-line-clamp: 2;`属性来限制显示的行数为2行。最后,使用`-webkit-box-orient: vertical;`属性将文本在垂直方向排列。
下面是一个示例代码:
```
<div class="line style">内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部 分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部 分内容部分内容部分内容部分内容部分内容部分内容部分</div>
<style>
.style {
width: 200px;
background: pink;
}
.line {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
```
这样,当文本超过2行时,就会显示省略号来代替溢出部分。
阅读全文