多行截断必须用-webkit-line-clamp三件套并配合@supports检测，禁用display:flex/block、需显式display:-webkit-box和-webkit-box-orient:vertical，容器须有明确宽高，max-height:none防双重截断，降级max-height须用em或数值单位严格计算。
别用一个 @mixin 同时处理多行截断和强制换行——它们底层机制冲突，硬塞一起在 Safari/Firefox/旧 WebView 里必然失效。
为什么 -webkit-line-clamp 单独写就失效
很多人复制粘贴三件套就跑，结果 Safari 截断错位、Firefox 完全没反应。根本不是漏了 overflow: hidden，而是：
-
display: -webkit-box必须显式声明；display: flex或block会让整个机制静默失败 -
-webkit-box-orient: vertical缺一不可；漏掉会导致只显示一行或文字堆叠错乱 - 容器必须有明确的
width或max-width；否则换行位置算不准，-webkit-line-clamp就是摆设 -
text-overflow: ellipsis对多行本身无效，但部分 Safari 版本能稳定渲染末尾省略号，建议保留
必须用 @supports 拆逻辑，不能靠 UA 判断
检测能力比猜 UA 可靠得多，也更简洁：
- 写
@supports (-webkit-line-clamp: 1)覆盖 Chrome/Safari/新版 Edge - Firefox 68+ 需额外加
@supports (line-clamp: 2) or (-webkit-line-clamp: 2)；注意line-clamp不带前缀在 Firefox 里不生效 - 别写
@supports (display: -webkit-box)—— 这个太宽泛，无法准确反映-webkit-line-clamp是否可用 -
@supports块内必须重置max-height: none；否则 WebKit 会先按max-height截一次、再按line-clamp截一次，造成双重截断
@mixin truncate-lines 封装时 max-height 计算最容易出错
fallback 不是随便设个高度就行，单位和乘法必须严格对齐：
-
line-height必须是数值（如1.5）或带em单位（如1.4em），禁用rem或混用无单位数字 -
max-height = line-height × 行数，例如line-height: 1.4em限 3 行 →max-height: 4.2em - 父容器不能有
padding或border干扰高度计算，否则实际可显示行数会少于预期 - 中文环境慎用
word-break: break-all强制换行来“辅助”截断——它会破坏语义分词，比如把“人工智能”拆成“人工智”和“能”
强制换行必须和截断逻辑彻底分离
长文本折断（多行省略）和强制换行是两类独立问题，不能共用同一套 CSS：
- 多行省略依赖
-webkit-line-clamp三件套 +@supports检测 - 强制换行首选
overflow-wrap: break-word（word-wrap是别名），纯数字串才用word-break: break-all -
word-break: break-all是暴力方案，会在任意字符处打断（比如把100px拆成100和px）；overflow-wrap: break-word只在必要时断单词，语义更干净 - 中文/CJK 文本下，两者效果接近，但
word-break: break-all仍可能把“区块链”拆成“区块”和“链”
最常被忽略的点：父容器宽度缺失、@supports 块内忘记写 max-height: none、降级时用 rem 算 max-height —— 这三个错误加起来，就能让 90% 的多行截断在真实设备上静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
