display: -webkit-box 仅适用于 WebKit 内核浏览器，因其是 WebKit 私有属性，chrome、safari、Chromium edge 支持，firefox 和旧 IE 不识别，且未被 W3C 标准化。
display: -webkit-box 为什么只能用于 WebKit 内核
因为 -webkit-box 和 -webkit-line-clamp 是 WebKit 专属的私有 css 属性，Chrome、Safari、Edge（Chromium 版）支持，Firefox 和旧版 IE 完全不识别。这不是标准 CSS，W3C 从未将其纳入规范，所以别指望它在所有浏览器里生效。
常见错误现象：在 Firefox 中文字不省略、高度塌陷、甚至布局错乱；开发时只在 Chrome 测试，上线后用户反馈“文字全显示出来了”。
- 必须搭配
display: -webkit-box使用，不能和flex或block混用 -
-webkit-box-orient: vertical必须显式声明，否则-webkit-line-clamp无效 - 父容器需有明确的
height或max-height，否则截断行为不可控
-webkit-line-clamp 的取值与实际效果差异
-webkit-line-clamp 看似只控制行数，但实际是否能精确截到指定行，取决于字体、行高、盒模型 padding/margin、以及内容是否含换行符或内联元素。
例如设为 2，但若第一行末尾是长单词（如 URL），且容器宽度不足以折行，可能实际只显示 1 行半，然后直接截断——这不是 bug，是字形渲染限制。
立即学习“前端免费学习笔记（深入）”；
- 推荐配合
line-height使用，比如line-height: 1.5，并确保max-height= 行数 × 行高（如max-height: 3em对应 2 行） - 避免在
line-clamp区域内嵌套img、svg或inline-flex元素，它们会破坏盒布局流 - 中文下基本可靠，英文需注意
word-break: break-word或overflow-wrap: break-word防止单词溢出
如何 fallback 到纯 CSS 标准方案（无 js）
没有通用纯 CSS 多行省略的标准方案，但可用「渐进增强」思路：先写 -webkit-box 方案，再用 @supports 隔离，对不支持的浏览器降级为单行省略（text-overflow: ellipsis + white-space: nowrap）。
Firefox 用户看到的是单行截断，比完全不截断更可控；若业务强依赖多行省略，必须引入 JS 方案（如 clamp.js 或手动计算 scrollHeight）。
/* WebKit 多行省略 */ .text-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-height: 1.6; max-height: 4.8em; /* 3 × 1.6 */ } / Firefox / 其他浏览器 fallback：仅单行 / @supports not (-webkit-line-clamp: 3) { .text-clamp { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-height: unset; } }
容易被忽略的 dom 结构陷阱
该方案对 html 结构极其敏感。一旦在目标元素内存在
、 嵌套或伪元素（::before/::after），-webkit-line-clamp 就可能失效或计算错行数。
典型场景：cms 输出的富文本中自带
标签，开发者直接套 .text-clamp 类，结果发现一行都没截——其实是
把内容撑成了多个块级子元素，破坏了 -webkit-box 的单一流向。
- 务必确保目标元素是纯文本容器，子节点只有文本节点（Text node）
- 若必须保留语义标签，需用 JS 提前提取
textContent渲染，或改用display: contents（注意兼容性） - 慎用
font-feature-settings或自定义字体，某些字体度量异常会导致行高计算偏差，进而影响截断位置
多行省略看着简单，真正上线前至少要在 Safari、Chrome、Edge、Firefox 四个环境里逐个点开 DevTools 修改 line-clamp 值测试；任何依赖换行符或富文本输入的地方，都得默认它不可靠。