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