-webkit-line-clamp需同时满足display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden三条件且写在同一元素上，缺一不可；ios 15.4–16.3存在行高计算偏差导致截行异常，@supports检测不可靠，应改用js运行时判定。
因为 -webkit-line-clamp 不是“写了就生效”的属性，而是依赖一套严格且脆弱的渲染上下文；漏掉任意一环，iOS Safari 或 Android Chrome 就会静默忽略它——不报错、不警告、只展示全部文本。
为什么 display: -webkit-box 和 -webkit-box-orient: vertical 缺一不可
WebKit 渲染引擎只在 display: -webkit-box 触发的盒模型中才识别 -webkit-line-clamp。一旦你用 display: flex、display: grid 或甚至没显式声明 display（靠继承或默认值），该属性直接被跳过。
-webkit-box-orient: vertical 必须拼写准确：不能加引号，不能写成 vertical;（分号不算），也不能漏冒号。它不是可选配置，而是告诉引擎“我要按垂直方向堆叠行盒”，否则 -webkit-line-clamp 没有计算依据。
- 常见翻车点：框架重置了子元素的 display，比如 Ant Design 的
.ant-typography默认设了display: block，覆盖了你写的-webkit-box - 真机验证时发现“有时有效有时无效”，大概率是父容器用了 flex，子元素又被 CSS-in-JS 动态注入了其他 display 值
为什么 overflow: hidden 必须写在同一个元素上
overflow: hidden 不是“祖先设了就行”的全局开关。如果它写在父层，而目标元素自身是 overflow: visible 或 auto，那 WebKit 就认为“这里允许溢出”，-webkit-line-clamp 自动失效。
这个限制特别容易在组件封装中踩坑：比如你封装了一个 <ellipsistext></ellipsistext> 组件，但外层容器加了 overflow: hidden，组件内部却忘了写——结果就是真机上省略号消失，桌面调试却正常。
- 必须检查 computed styles 中
overflow是否为hidden，且来源是你写的那条规则 - 不要依赖
overflow: hidden的隐式继承（它不继承） - 避免和
position: absolute同时使用，某些 iOS 版本下会破坏剪裁上下文
为什么 iOS 15.4–16.3 真机会少截一行或省略号错位
这不是你代码错了，是 WebKit 在该版本区间存在已知的行盒剪裁 bug：中英文混排、动态字号（如 font-size: clamp(14px, 1.2rem, 16px)）、或用了 rem + vw 根字体时，行高计算偏差会导致最后一行未被正确识别为“可截断区域”。
模拟器完全测不出来，只有 iOS 真机（尤其是 iPhone 12～14 系列）能复现。Chrome DevTools 的 responsive 模式也不准。
- 临时缓解：加
overflow-wrap: break-word强制软换行，减少跨行判断误差 - 更稳方案：放弃
-webkit-line-clamp，改用max-height: 2.8em（假设line-height: 1.4em）+overflow: hidden物理截断 - 绝对别在该元素里嵌套
<img>、<strong></strong>等 inline 子元素，它们会干扰行盒生成逻辑
为什么 @supports (line-clamp: 3) 检测完全不可靠
@supports 对私有前缀属性返回 false 是标准行为。即使设备支持 -webkit-line-clamp，@supports (line-clamp: 3) 或 @supports (-webkit-line-clamp: 3) 都可能返回 false，尤其在旧版 Android WebView 中。
真正有效的检测方式是运行时 JS 判定：
const el = document.createElement('div');
const supported = getComputedStyle(el).webkitLineClamp !== undefined;
如果 supported === false，就该走降级逻辑——比如纯视觉降级（只用 max-height + overflow: hidden），或轻量 JS 截断（用 scrollHeight > clientHeight 判断溢出，再逐词回退）。
真正麻烦的从来不是“怎么写 CSS”，而是“怎么让中文、emoji、动态字号、不同内核都看起来差不多”。-webkit-line-clamp 是快捷键，不是万能钥匙；一旦内容结构复杂或兼容要求高，老老实实用 JS 判高度，往往比调一堆 CSS 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
