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