【CSS】设置文本超出N行省略
文章目录
- 基本使用
这种方法主要是针对Webkit浏览器，因此可能在一些非Chrome浏览器中不适用。
基本使用
例如：设置文本超出两行显示省略号。
- 核心代码：
.ellipsis-multiline {
display: -webkit-box;
-webkit-box-orient: vertical; /* 设置垂直排列 */
-webkit-line-clamp: 2; /* 设置行数 */
overflow: hidden; /* 设置超出省略 */
text-overflow: ellipsis; /* 设置省略以...结尾 */
}
- 实际使用：
<div class="ellipsis-multiline">
这里是一段很长的文本，如果超出两行的话，将会显示省略号。这样可以保持布局的整洁，同时用户可以看到完整内容的一部分。
</div>