-webkit-line-clamp在移动端需严格满足display:-webkit-box、-webkit-box-orient:vertical、明确宽度、纯文本、overflow:hidden五条件才生效，缺一即失效，且依赖真机验证。
-webkit-line-clamp 在移动端能用，但不是“加了就生效”，它对渲染上下文极其敏感。绝大多数失效问题，不是浏览器不支持，而是 CSS 规则之间互相打架。
为什么 -webkit-line-clamp 在 iOS 和 Android 上经常不显示省略号
根本原因在于它依赖一套不可拆分的渲染链：必须同时满足 display: -webkit-box、-webkit-box-orient: vertical、明确宽度、纯文本内容、overflow: hidden，缺一不可。
-
display: -webkit-box会被父级display: flex或组件库（如 Tailwind 的flex工具类）覆盖，一旦变成display: flex或display: block，整个机制立即失效 -
-webkit-box-orient: vertical拼写错误（比如写成vertical;多了个分号，或漏了冒号）会导致属性被忽略，且无任何报错提示 - 容器没设
width或max-width（哪怕写了width: 100%），但其父容器是position: absolute或未设宽的 flex item，实际计算宽度为 0，-webkit-line-clamp就不会触发 - 内容里混有
带内联样式的节点，或用了line-height: 1.5rem这类受根字体大小影响的单位，行高计算偏差会直接导致截断位置偏移甚至不截断
移动端实测有效的最小配置写法
以下是在 iOS 15+、Android Chrome 110+、Safari 16.4+ 上稳定生效的写法，已剔除所有冗余声明：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
-
-webkit-line-clamp值必须是整数，不能是2.5或auto -
text-overflow: ellipsis在部分 iOS 16.4+ 场景中非必需，但加上更稳妥；在 Android WebView 中建议保留 - 避免使用
rem设置line-height，改用em或固定px，防止动态根字体变化干扰行数判断 - 若父容器是 flex 容器，确保该元素没被设
flex: 1或flex-grow: 1，否则可能因弹性收缩导致宽度坍缩
当 -webkit-line-clamp 不可用时，怎么 fallback
纯 CSS fallback 在旧版 iOS（如 iOS 12–14）或低端 Android WebView 中基本不可靠。JS 方案也容易翻车：
- 用
offsetHeight判断是否溢出？移动端字体渲染差异大，同一段文字在不同设备上高度可能差 1–2px，导致截断位置跳变 - 用
getBoundingClientRect().height更准一点，但仍需预设单行高度，而这个值受font-family、font-weight、系统字体替换影响，很难精确 - 最务实的做法是服务端或构建时截字数：后端按字符数（注意中英文占比）截取前 N 字 +
…，前端只负责渲染，零兼容风险 - 如果必须前端 JS 控制，优先用
textContent纯文本输入，避免 HTML 解析开销；截断逻辑不要嵌在 scroll 或 resize 回调里，防卡顿
真正难的不是写对那几行 CSS，而是理解 -webkit-line-clamp 不是一个独立功能，而是一条脆弱的渲染链——任意一环松动，省略号就消失。它不像 text-overflow: ellipsis 那样鲁棒，所以每次加完都要在真机上验证，而不是只看桌面 Chrome 模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
