不能只靠@mixin封装“万能”多行截断，必须拆分处理webkit原生能力、高度降级和firefox特殊支持三块逻辑，否则在safari、firefox或android webview上必然出问题。
直接说结论：不能只靠 @mixin 封装一个“万能”多行截断，必须拆开处理 WebKit 原生能力 + 高度降级 + Firefox 特殊支持三块逻辑，否则在 Safari、Firefox 或 Android WebView 上必然出问题。
为什么 -webkit-line-clamp 单独用一定会失效
很多人复制粘贴就写：.clamp { -webkit-line-clamp: 2; }，结果在 Safari 上不截断、Firefox 里完全没反应——这不是你漏写了 overflow: hidden，而是它根本不是独立属性。
-
display: -webkit-box必须显式声明，display: flex或display: block会直接让整个机制失效 -
-webkit-box-orient: vertical缺一不可，漏掉就退化为单行甚至文字错位 - 容器必须有明确的
width或max-width，否则-webkit-line-clamp算不出换行点 - 和
text-align: justify共用时，WebKit 下省略号可能偏移或消失
@supports 检测比 UA 判断更可靠
别用 JavaScript 判断 navigator.userAgent 来加 class，浏览器版本迭代快，UA 字符串不可靠；@supports 是 CSS 原生特性检测，稳定且语义清晰。
- 检测
(-webkit-line-clamp: 1)覆盖 Chrome/Safari/新版 Edge - 补充检测
(line-clamp: 2)或(-webkit-line-clamp: 2)，兼容 Firefox 68+（需前缀） - 用
@supports not (line-clamp: 3)强制给旧 Android WebView 启用降级方案 -
max-height: none必须写在@supports块内，否则 WebKit 会先按max-height截一次、再按line-clamp截一次，导致文字被切掉半行
降级方案必须用固定 line-height 数值单位
基于 max-height 的 fallback 不是“凑合能用”，而是真实场景下 Firefox / IE / 旧 WebView 的唯一可靠路径。
-
line-height必须是数值（如1.5）或带em（如1.5em），不能用rem或无单位数字混用，否则计算偏差会导致截断错位 -
max-height=line-height × 行数，例如line-height: 1.5em且限 3 行 →max-height: 4.5em - 必须加
position: relative，否则::after伪元素无法精确定位到底部右角 - 若背景非纯色（如渐变、图片），伪元素遮盖方案失效，只能改用 JS 方案或接受无省略号
最易被忽略的一点：所有方案都要求父容器宽度可控。响应式布局中，如果用 flex: 1 或 width: 100% 但外层未设 max-width，-webkit-line-clamp 在 iOS Safari（尤其 iOS 12–14）下会因 rem 动态变化而计算失准——这时候固定 em 单位 + font-size: 1em 锁定才是解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
