使用-webkit-line-clamp可实现多行文本溢出省略，通过display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis组合控制显示行数，需设置固定宽度与行高，适用于现代浏览器，注意其为非标准属性，未来可结合标准line-clamp渐进增强。
在CSS中实现多行文本溢出并显示省略号（text-overflow: ellipsis）是前端开发中的常见需求。虽然标准的 text-overflow: ellipsis 仅支持单行，但通过一些现代CSS属性，可以轻松实现多行文本的截断效果。
使用 -webkit-line-clamp 实现多行省略
目前最常用且兼容性较好的方法是结合 display: -webkit-box 和 -webkit-line-clamp 属性。这种方法适用于大多数现代浏览器。
关键属性说明：
- display: -webkit-box：将元素设为弹性盒模型（Webkit特有）
- -webkit-line-clamp：限制文本行数
- -webkit-box-orient: vertical：设置子元素垂直排列
- overflow: hidden：隐藏溢出内容
- text-overflow: ellipsis：超出部分显示省略号
示例代码：
立即学习“前端免费学习笔记（深入）”；
Money Knowledge
下载
金钱与财富知识助手。提供关于金钱的基本概念、理财知识、投资原则、财富思维等方面的内容。适用于：1) 了解金钱的基本知识；2) 学习理财和投资原则；3) 培养财富思维；4) 了解经济学基础概念。
.multi-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* 控制显示3行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
}
实际应用场景与注意事项
这种写法广泛应用于文章列表、商品描述、评论等内容区域，确保界面整齐统一。
需要注意的几点：
- 该方法依赖 Webkit 内核特性，虽然在多数现代浏览器中可用（包括Chrome、Safari、Edge、Firefox），但严格来说是非标准属性
- 父容器需要有明确的宽度或最大宽度，否则无法触发溢出
- 行高（line-height）会影响截断的精确位置，建议统一设置
- 避免在需要高度自适应动画的场景中使用，可能影响性能
替代方案：纯标准CSS（实验性）
CSS Working Group 正在推进 line-clamp 标准属性，未来有望取代 -webkit-line-clamp。
当前可作为渐进增强写法：
.multi-line-standard {
line-clamp: 3; /* 未来标准语法 */
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
基本上就这些。只要结构合理、样式完整，多行文本截断并不复杂，但容易忽略细节导致失效。掌握 -webkit-line-clamp 的组合用法，能快速解决日常开发中的文本溢出问题。
