如何修复CSS多行省略在Safari中的兼容问题

iOS Safari 15.4–16.3真机存在-webkit-line-clamp行数计算bug，旧版Safari需手动写全四件套并前置-webkit声明，且必须配合display:-webkit-box和-webkit-box-orient:vertical才能生效。

直接说结论：iOS Safari 15.4–16.3 真机存在 -webkit-line-clamp 渲染 bug，不是你漏写了属性，是 WebKit 自己算错行数；而 iOS ≤13.3 或 macOS ≤14 的旧 Safari 根本不识别 display: -webkit-box，必须补前缀+调整声明顺序。

为什么 -webkit-line-clamp 在 Safari 里完全不生效

根本不是属性没写对，而是 Safari 拒绝执行——它只在特定布局上下文中才触发截断逻辑：

1. display: -webkit-box 和 -webkit-box-orient: vertical 缺一不可；写成 flex 或 grid 容器的子元素上，-webkit-line-clamp 直接被忽略
2. overflow: hidden 必须写在**同一个元素**上；祖先设了 hidden，中间某层是 visible 或 auto，就等于开了后门
3. 容器没设 max-height 或固定高度，-webkit-line-clamp 可能不触发——它依赖布局高度算行数，不是纯逻辑控制
4. text-overflow: ellipsis 对多行无效，加了也不起作用，别混用

如何让多行省略在旧版 Safari（iOS ≤13.3 / macOS ≤14）真正跑起来

这些版本连 display: -webkit-box 都不认，光靠 Tailwind 默认类名或 autoprefixer 补前缀根本不够：

1. 必须手动写全四件套：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden
2. 带 -webkit- 的声明必须写在标准声明之前，否则旧 Safari 会跳过整条规则
3. .browserslistrc 里得明确写 ios_saf >= 11.3 或 safari >= 10，否则 autoprefixer 不生成前缀
4. 运行 npx browserslist 验证是否真命中目标 Safari 版本；last 2 versions 默认跳过低占比旧 iOS Safari

遇到 iOS Safari 15.4–16.3 真机漏截或省略号偏移怎么办

这不是代码问题，是 WebKit 渲染引擎的已知 bug：中英文混排、emoji、响应式字号都会导致行数判断失准：

1. 模拟器测不出来，必须真机验证；尤其注意 font-size 动态变化时的边界情况
2. 放弃 -webkit-line-clamp，改用 max-height + 固定 line-height + overflow: hidden 组合（例如两行 × line-height: 1.4em → max-height: 2.8em）
3. 避免在省略容器内嵌套 <strong> 等 inline 标签，它们可能干扰行盒生成
4. 必须统一表现时，用 JS 判高度更稳：element.scrollHeight > element.clientHeight，再逐词回退截取，注意用 textContent 避开 HTML 标签

真正麻烦的从来不是“怎么写”，而是“怎么让不同设备都看起来差不多”。-webkit-line-clamp 是快捷键，不是万能钥匙；一旦内容含中文、emoji 或响应式字号，行数控制就容易失准——这时候，老老实实用 JS 判高度，往往比调一堆 CSS 更省时间。