【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>