干货：CSS 文本截断方法总结和原理分析

虽然文本截断并不是什么很复杂的东西，但浏览器却没有较完善的原生支持。于是诞生了下面各种妖魔鬼怪的解决方案。每个方案都有各自的优缺点和适用场景，请根据自己的需要选择合适的方案。
单行截断
.single-line-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
复制代码
white-space: nowrap; white-space 用于指定空白符（white space）的行为。 值 nowrap 会将多个连续空格符或换行符视为一个空格符。默认情况下，文本超过容器宽度时，会自动在合适的地方添加换行符进行换行。设置了该值后，换行效果会被消除，使文本不进行换行，从而实现文本单行显示的效果。此时我们会发现文本发生了溢出：后面的文本内容跑到容器外面去了。
对此，我们再使用 overflow: hidden，将文本进行截断处理，将超出容器显示的文本隐藏起来。如果希望在文本默认处使用省略号，使用 text-overflow: ellipsis; 来指定文本溢出的方式，为文本末追加合适的截断并添加省略号 …。
可以使用使用双引号包裹的字符串值（如 text-overflow: “…”）来自定义截断字符，但绝大多数浏览器都不支持（貌似只有 firefox 支持），不推荐使用。
多行截断：-webkit-line-clamp
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
复制代码
-webkit-line-clamp 可以指定文本在第几行进行截断并添加 …。该属性只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical时才有效果。
随着 Firefox（68 版本开始） 的支持，该方案可以说是目前多行文本截断的不错选择，而且这种写法是官方提供的写法，而不是 CSS trick。
不使用截断字符（如 …）的多行截断
.multi-line {
line-height: 20px;
max-height: 60px;
overflow: hidden;
word-break: break-all;
}
复制代码
如果你不在意截断字符，上面这种写法就足够了，它会最