【知识整理】CSS多余的多行文本显示省略号

1.如果文本为单行，我们可以通过如下css设置控制超过盒子宽度的多余文本显示为“...”形式的省略号。

.t-ellipsis{    white-space: nowrap;    overflow:hidden;    text-overflow:ellipsis;}

效果如下：

2.但是往往我们有时会遇到如下需求，如果文本为多行，例如：我们要求超过5行后，多余的文本显示为“...”形式的省略号。通过查找网络资料最终找到了解决办法。css代码如下：

.hidden-surplus{    text-overflow: -o-ellipsis-lastline;    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 5;    -webkit-box-orient: vertical;}

说明：其中用来定义超过多少行后显示省略号，-webkit-line-clamp: 5;表示文本内容超过5行会显示省略号

效果如下：