-webkit-line-clamp需同时满足display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden及明确宽度约束才生效；不支持时须用js检测高度变化来fallback。
-webkit-line-clamp 在 iOS 14+ 和主流安卓 WebView 中基本可用，但不是“写了就生效”，必须满足四个硬性条件，缺一不可；不支持时纯 CSS 无法检测，必须用 JS 主动判断并 fallback。
为什么 -webkit-line-clamp 常常不生效
它不是独立属性，而是依赖一套组合拳。常见失效原因包括：
-
display: -webkit-box被覆盖（比如父容器用了display: flex，子元素又没重置display） - 漏写
-webkit-box-orient: vertical—— 这个值不能简写成vertical，也不能用flex-direction替代 - 忘了显式声明
overflow: hidden，导致超出行数的文字直接溢出显示 - 容器没有明确的
width或max-width，浏览器无法计算“多少行算多” - 和
line-height、padding、字体度量耦合过紧，实际截断行数浮动（比如某些中文字体下-webkit-line-clamp: 2实际只压到 1.8 行）
移动端多行省略的标准写法
以下是最小可行样式块，适用于大多数现代移动端环境：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
/* 必须有宽度约束 */
max-width: 100%;
/* 防止内联元素撑宽 */
word-break: break-word;
}
注意点：
- 不要加
height或max-height（会和-webkit-line-clamp冲突） - 避免在同一个元素上混用
display: flex和display: -webkit-box - 如果文本含链接或内联标签，需确保它们不破坏盒模型流（例如给
a加display: inline-block可能触发换行异常）
如何检测 -webkit-line-clamp 是否真正生效
UA 判断完全不可靠（比如 iPadOS 13.7 某些 WKWebView 已打补丁支持）。正确做法是创建测试节点，比对渲染高度：
function supportsLineClamp() {
const el = document.createElement('div');
el.style.cssText = 'display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100px; font-size: 14px;';
el.textContent = '一二三四五六七八九十';
document.body.appendChild(el);
const clamped = el.offsetHeight;
el.style.webkitLineClamp = '100';
const full = el.offsetHeight;
document.body.removeChild(el);
return clamped <p>若返回 <code>false</code>，说明当前环境不支持，应立即切换方案：</p>
- 降级为 JS 截断（按字符数 +
getBoundingClientRect()动态测高） - 或放弃截断，改用“省略号 + 展开按钮”交互（更可控，也更符合可访问性）
容易被忽略的兼容性细节
即使检测通过，在真实机型上仍可能翻车：
- 华为部分 X86 内核 WebView（如旧版 EMUI 浏览器）会完全忽略
-webkit-line-clamp，连overflow: hidden都不触发裁剪 - 某些 Android 定制 ROM 的系统浏览器（如 vivo、OPPO 自研内核）对
-webkit-box-orient解析不稳定，偶尔会当普通block处理 -
font-family切换时，同一段文字在不同字体下实际行高差异可达 20%，导致-webkit-line-clamp: 3在思源黑体下刚好三行，在苹方下却只显示两行半
所以，真正在意体验的项目，不会只押注 -webkit-line-clamp，而会把 JS fallback 当作必选项，而不是“以防万一”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
