多行文本省略需配合 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp 和 overflow: hidden 四步实现，依赖块级上下文与高度约束，IE 不支持，常见失效原因包括遗漏关键属性或布局干扰。
多行文本省略号在 CSS 中不能靠 text-overflow: ellipsis 单独实现（它只对单行生效），必须配合 display: -webkit-box 和 -webkit-line-clamp，再通过盒模型控制高度与溢出行为。关键在于「限制行数 + 截断 + 视觉隐藏」三者协同。
基础写法：line-clamp 核心四步
这是最常用、兼容性较好的方案（Chrome/Safari/Edge 68+、Firefox 68+ 支持）：
- 设置 display: -webkit-box：启用弹性盒的旧版 box 模型，让文本可按行截断
- 设置 -webkit-box-orient: vertical：指定子元素垂直 排列（即按行堆叠）
- 设置 -webkit-line-clamp: N：限定显示 N 行，超出部分被截断并触发省略号
- 设置 overflow: hidden：隐藏被截掉的内容，否则可能撑开容器或显示多余文字
示例：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
必须搭配的盒模型约束
-webkit-line-clamp 不是独立生效的属性，它依赖容器有明确的「块级上下文」和「高度边界」。常见遗漏点：
立即学习 “ 前端免费学习笔记（深入）”；
- 不能设 height: auto 或不设高度：需确保父容器能自然包裹内容（如用
max-height或固定height配合line-height计算） - 避免浮动、绝对定位 干扰布局流：line-clamp 对脱离文档流的元素无效
- 慎用 flex 子项直接套 line-clamp：若父 flex 容器设了
align-items: stretch，可能影响截断效果；建议在外层加一层普通块级 wrapper - 字体大小与行高要稳定：动态字号或不一致
line-height会导致实际行数偏差（比如line-height: 1.5+font-size: 14px≈ 每行 21px，3 行约需max-height: 63px）
兼容性兜底与现代替代思路
IE 完全不支持 line-clamp，旧版 Android Webview 也有问题。稳妥做法：
- JS 辅助截断：获取 DOM 文本、按字符 / 字数估算行数、插入
……，适合对 SEO 或无障碍要求高的场景 - CSS clamp() + max-lines（实验性）：Firefox 支持
line-clamp后，CSS 已将max-lines纳入草案，但尚未广泛实现，暂不可用于生产 - 服务端截断 + 前端 标记 ： 后端 按字数预处理，前端仅负责样式展示，适合评论摘要等结构化内容
纯 CSS 方案中，目前 -webkit-line-clamp 仍是多行省略事实标准，只需注意加前缀、配盒模型、不强依赖 IE。
常见失效原因速查
如果写了 line-clamp 却没效果，大概率是以下之一：
- 忘了写
display: -webkit-box或-webkit-box-orient: vertical - 容器设置了
white-space: nowrap（会强制单行） - 文本内嵌了
display: inline-block或float元素，破坏了 box 的文本流连续性 - 父容器
overflow不是hidden（比如是visible或auto） - 使用了
text-align: justify，某些 浏览器 下与 line-clamp 冲突
