Firefox中line-clamp失效的直接原因是：必须搭配display:block或inline-block，而不能与display:-webkit-box共存；@supports检测无效；padding干扰截断计算；iOS Safari存在渲染bug。
line-clamp 在 Firefox 中不生效的直接原因
Firefox 68+ 原生支持 line-clamp（无前缀），但前提是必须搭配 display: block 或 display: inline-block，而不能和 display: -webkit-box 共存。很多开发者照搬 WebKit 写法，把 display: -webkit-box 和 line-clamp: 3 放在同一规则里，结果 Firefox 因为不识别 -webkit-box 直接丢弃整条声明，导致 line-clamp 失效。
更隐蔽的问题是：@supports (line-clamp: 3) 在 Firefox 中返回 false，因为它是私有属性检测机制的遗留缺陷——别用它做特性判断。
推荐做法是拆开写，让浏览器按自身能力自然选择：
-
display: -webkit-box+-webkit-line-clamp专供 Chrome/Safari/Edge -
line-clamp: 3单独成规则，留给 Firefox - 两者都加
overflow: hidden，避免渲染错乱
padding 导致 line-clamp 溢出到下一行
这是 Tailwind 用户高频踩坑点：line-clamp-2 类若直接作用在带 py-2 px-3 的元素上，overflow: hidden 会因内边距干扰截断计算，导致第三行文字“漏出来”——看着有省略号，实际多占了一行高度。
立即学习“前端免费学习笔记（深入）”；
根本原因是 line-clamp 的行高计算基于内容盒（content box），而 padding 扩展了元素总高度，使隐藏区域错位。
解决方式只有一条：隔离内边距
- 外层容器负责
padding和布局样式 - 内层
<span></span>或<div> 仅承载文本，并应用 <code>line-clamp类 - 不要对同一元素同时设
padding和line-clamp
示例结构：
<li class="px-3 py-2"> <span class="line-clamp-2">长文本内容...</span> </li>
移动端 iOS Safari 省略号消失或少截一行
iOS Safari 15.4–16.3 存在渲染层剪裁上下文断裂问题，尤其在中英文混排、font-size 动态变化、或父容器使用 transform 时，-webkit-line-clamp 可能失效或漏截。
这不是 CSS 写错了，而是 WebKit 渲染管线 bug。临时缓解策略包括：
- 给元素加
backface-visibility: hidden，强制触发独立合成层 - 避免在
line-clamp元素上使用will-change: transform - 确保
line-height是固定值（如1.4em），不用normal或百分比 - 真机测试时，优先用
max-height+overflow: hidden保底，哪怕没有省略号
回退方案必须能物理截断，不能只靠视觉遮罩
渐变遮罩（::after + linear-gradient）看起来酷，但本质是“假装截断”，文本 DOM 仍在、可被复制、影响屏幕阅读器，且换背景色就露馅。
真正可靠的降级逻辑是：
- 先设
max-height: calc(1.4em * 3)（假设line-height: 1.4em） - 配
overflow: hidden，保证内容不可见、不可交互 - 不依赖伪元素或颜色匹配，不引入额外可访问性风险
- 如果需要省略号语义，JS 方案比 CSS 遮罩更可控
复杂点在于：行高不是绝对值，em 依赖字体度量，rem 依赖根字号。所以保底 max-height 最好用具体像素值（如 42px），或通过 JS 动态注入精确高度。
