-webkit-line-clamp 是 WebKit 私有属性，仅 Chrome、Edge（Chromium）、Safari 15.4+ 稳定支持；Firefox 完全不识别，旧版 Safari 行为异常，需配合 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden 才生效。
为什么 -webkit-line-clamp 在 Firefox 和 Safari（旧版）中不生效
它根本不是标准 CSS 属性，而是 WebKit 内核的私有扩展，只在 Chrome、Edge（Chromium）、Safari（15.4+）中稳定支持。Firefox 完全不识别该属性，Safari 15.3 及更早版本对 display: -webkit-box 的行为有差异，可能导致截断失效或高度计算错误。
常见错误现象：line-clamp 设为 3，但实际显示 1 行或 4 行；文字被粗暴裁剪（无省略号）；父容器高度塌陷或溢出。
- 必须配合
display: -webkit-box+-webkit-box-orient: vertical才能触发截断逻辑 -
overflow: hidden缺一不可，否则内容会撑开容器 - 不能和
flex或grid布局混用 ——-webkit-box是独立的显示模型，与现代布局不兼容 - 若父容器未设置明确
height或max-height，截断行为可能不可预测
-webkit-line-clamp 的最小必要样式组合
仅靠一行 line-clamp 不会起作用。它依赖一套“隐式协议”：用 -webkit-box 模拟块级流，再用 box-orient 控制方向，最后靠 line-clamp 限制行数。
正确写法（带 fallback 注释）：
.text-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
<p>/<em> 标准草案中的尝试（暂未被任何浏览器实现） </em>/
/<em> line-clamp: 3; </em>/
}
</p>
-
display: -webkit-box会覆盖掉你原本设的flex或inline-block，务必检查继承链 - 不要给该元素设
height，否则可能和line-clamp计算冲突；优先用max-height配合overflow - 如果文本含
<br>
或内联 HTML（如<strong></strong>），截断位置可能异常 —— 这是 WebKit 渲染器的已知限制
Firefox / IE 等不支持环境下的降级方案
没有纯 CSS 标准方案能可靠实现多行省略。可行路径只有两条：JS 动态截断，或 CSS 伪元素模拟（有严重局限）。
推荐轻量 JS 方案（不依赖框架）：
function clampText(el, lines) {
const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 1.2;
const maxHeight = lineHeight * lines * parseFloat(getComputedStyle(el).fontSize);
el.style.maxHeight = `${maxHeight}px`;
el.style.overflow = 'hidden';
}
// 调用：clampText(document.querySelector('.desc'), 3);
- 注意：需监听窗口 resize 和字体加载完成（
document.fonts.ready），否则首次计算不准 - CSS 伪元素方案（用
::after叠加渐变遮罩）只能“视觉欺骗”，用户仍可全选复制溢出文字，且无法响应点击事件 - 服务端截断（如后端限制字符数）最稳定，但失去响应式适应能力 —— 行数随屏幕宽度变化时会失效
盒模型中容易被忽略的尺寸干扰点
-webkit-line-clamp 对盒模型极其敏感。哪怕一个像素的偏差，都可能让省略号消失或换行错乱。
-
padding和border会参与max-height计算，建议统一用box-sizing: border-box - 若父容器用了
font-size: 0（常见于清除 inline-block 间隙），子元素必须显式重置font-size，否则line-height失效 -
vertical-align对-webkit-box元素无效，但若它作为 inline-level 元素存在（比如在段落中），其基线对齐仍会影响周围布局 - 慎用
transform: scale()或zoom—— WebKit 的行高计算会失真，导致截断提前或延后
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
