CSS如何实现多行文本省略？

单行文本省略用text-overflow: ellipsis就行，但多行文本省略稍微麻烦点。现在最常用、也相对简单的方法是使用-webkit-line-clamp属性。这个方案在HTML5的移动端项目和现代浏览器中已经得到广泛支持。

它的核心是一套组合属性，作用在一个设置为弹性盒模型的容器上。你通过-webkit-line-clamp来指定需要显示的最大行数，超出部分就会被截断并显示省略号。

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

这段代码会把文本内容限制在3行以内。display: -webkit-box是触发旧版弹性盒模型布局，-webkit-box-orient: vertical让内容垂直排列，overflow: hidden负责隐藏超出的部分，最后由-webkit-line-clamp: 3来实现截断和添加省略号。

这个方法的主要限制在于它依赖于带-webkit-前缀的属性，在非WebKit/Blink内核的浏览器（比如Firefox）中可能不生效。不过好消息是，现在大多数现代浏览器包括新版Edge都已支持这个特性。

如果你需要一个兼容性更强的方案，还可以考虑用JavaScript来计算文本高度和行数，动态添加省略号。但对于纯CSS场景，-webkit-line-clamp是目前平衡了简洁性和效果的最佳选择。在实际使用时，确保放置文本的容器有明确的宽度，这个属性才能正确计算行数。