多行文本溢出显示省略号可通过-webkit-line-clamp实现，结合display: -webkit-box和-webkit-box-orient限制行数，配合overflow: hidden生效，适用于现代浏览器；对老旧浏览器可采用JavaScript动态截取文本，但影响性能与SEO；推荐使用-webkit-line-clamp方案并封装为通用CSS类，提升开发效率与维护性。
多行文本溢出时显示省略号（...）是前端开发中常见的需求，尤其在列表、卡片等空间有限的布局中。CSS 提供了一些方法来处理多行文本溢出，虽然不如单行溢出那样直接，但通过现代浏览器支持的属性可以实现。
1. 使用 -webkit-line-clamp 实现多行省略
-webkit-line-clamp 是一个非标准但被广泛支持的 CSS 属性，用于限制在一个块元素显示的文本行数。结合 display: -webkit-box 和 -webkit-box-orient 可以实现多行文本截断。
示例代码：
.text-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 显示3行 */
overflow: hidden;
line-height: 1.5;
}
说明：
- display: -webkit-box：将元素设为弹性盒模型（旧版 WebKit 格式）。
- -webkit-box-orient: vertical：设置子元素垂直排列。
- -webkit-line-clamp：限制最多显示几行，超出部分隐藏并显示省略号。
- overflow: hidden：必须设置，否则内容会溢出。
注意：该方案在大多数现代浏览器中有效，但在极少数老旧或非主流浏览器中可能不兼容。
立即学习“前端免费学习笔记（深入）”；
2. 兼容性与注意事项
尽管 -webkit-line-clamp 不是标准属性，但它已被大多数主流浏览器支持（包括 Chrome、Firefox、Safari、Edge）。但在使用时仍需注意：
- 在 Firefox 中需要确保父容器有明确的高度或 max-height 配合使用，避免布局异常。
- 避免在复杂弹性布局或 Grid 布局中与其他 flex 属性冲突。
- 如果内容动态加载，需确保 DOM 更新后样式依然生效。
3. 替代方案：JavaScript 截取文本
当需要更高兼容性（如支持 IE）时，可采用 JavaScript 动态计算行高和字符数量，手动截取文本并添加省略号。
简单思路：- 设定容器最大高度（基于行高 × 行数）。
- 逐步减少文本内容，直到元素滚动高度不超过限制。
- 添加“...”表示截断。
这种方法更灵活，但增加了 JS 负担，且不利于 SEO 和可访问性。
4. 推荐实践
对于现代项目，推荐使用 -webkit-line-clamp 方案，简洁高效。建议封装成通用类：
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
-webkit-line-clamp: 3;
}
配合 CSS 自定义属性（CSS 变量），可进一步提升灵活性。
基本上就这些，合理选择方案即可满足多数场景。
