-webkit-line-clamp 必须与 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 联用才生效；漏任一属性或上下文不匹配（如非block元素、无高度约束、flex直接套用）均导致截断失效。
line-clamp 必须配合 display: -webkit-box 才生效
直接写 -webkit-line-clamp: 2 是没用的，浏览器会忽略。它只在 display: -webkit-box + -webkit-box-orient: vertical 的组合下起作用。这是硬性前提，不是可选优化。
常见错误是只加了 -webkit-line-clamp，却忘了改 display，结果文本照常撑开容器、完全不截断。
- 必须写全这三句：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N - 如果父容器用了
flex或grid，子元素再设-webkit-box不冲突，但要注意align-items可能影响垂直居中表现 - 不要给容器设固定
height，否则和line-clamp叠加会导致文字被切掉半行
max-height: none 是防止双重截断的关键
很多人为了兼容老浏览器，会先写一层 max-height: calc(1.5em * 3)，再用 @supports 开启 line-clamp。但如果忘记在 @supports 块里重置 max-height: none，WebKit 浏览器会先按 max-height 截一次，再按 line-clamp 截一次，最终显示行数少于预期（比如设了 3 行，实际只显示 2 行半）。
正确做法是在支持 line-clamp 的条件下，显式覆盖掉高度限制：
立即学习“前端免费学习笔记（深入）”；
.clamp {
line-height: 1.5em;
max-height: calc(1.5em * 3);
overflow: hidden;
}
@supports (-webkit-line-clamp: 1) {
.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-height: none; /* 这句不能少 */
}
}Firefox 68+ 需要额外加标准前缀才稳定
Firefox 自 68 版本起支持 line-clamp，但必须带 -webkit- 前缀才能用——它至今**不认标准写法 line-clamp: 3**，哪怕你加了 @supports (line-clamp: 3) 也不行。实测中，只写标准属性在 Firefox 会完全失效。
稳妥方案是同时提供双前缀：
-
-webkit-line-clamp: 3（Chrome/Safari/Edge） -
-moz-box-orient: vertical（旧版 Firefox 兼容，非必需但保险） - 别单独依赖
line-clamp: 3，目前仍无效
如果你用 SCSS 封装 mixin，记得把 -webkit- 作为唯一落地前缀，其他前缀只是兜底或历史兼容。
text-overflow: ellipsis 在多行下仅作辅助
text-overflow: ellipsis 对单行有效，但在多行 line-clamp 场景中，它其实不起作用——省略号是由 -webkit-line-clamp 自动添加的，和 text-overflow 无关。删掉它不会影响省略号显示；加上它也不会让省略号更“规范”。
但它有隐藏价值：当降级到 max-height 方案时，text-overflow: ellipsis 完全无效（因为不是单行），此时真正起作用的是伪元素渐变遮罩或 JS 动态截断。所以这个属性本质是个“占位符”，提醒你当前走的是多行截断路径，而非单行方案。
容易被忽略的一点：如果容器宽度不够，文本可能在第 1 行就触发单行截断逻辑（显示“…”），导致根本达不到设定的行数。务必确保 width 足够，或设为 width: 100% 并检查父级是否收缩。
