多行文本省略需配合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：隐藏被截掉的内容，否则可能撑开容器或显示多余文字

示例：

必须搭配的盒模型约束

-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 冲突