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 拒绝执行——它只在特定布局上下文中才触发截断逻辑：
-
display: -webkit-box和-webkit-box-orient: vertical缺一不可；写成flex或grid容器的子元素上，-webkit-line-clamp直接被忽略 -
overflow: hidden必须写在**同一个元素**上；祖先设了hidden，中间某层是visible或auto，就等于开了后门 - 容器没设
max-height或固定高度，-webkit-line-clamp可能不触发——它依赖布局高度算行数，不是纯逻辑控制 -
text-overflow: ellipsis对多行无效，加了也不起作用，别混用
如何让多行省略在旧版 Safari（iOS ≤13.3 / macOS ≤14）真正跑起来
这些版本连 display: -webkit-box 都不认，光靠 Tailwind 默认类名或 autoprefixer 补前缀根本不够：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须手动写全四件套：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden - 带
-webkit-的声明必须写在标准声明之前，否则旧 Safari 会跳过整条规则 -
.browserslistrc里得明确写ios_saf >= 11.3或safari >= 10，否则autoprefixer不生成前缀 - 运行
npx browserslist验证是否真命中目标 Safari 版本；last 2 versions默认跳过低占比旧 iOS Safari
遇到 iOS Safari 15.4–16.3 真机漏截或省略号偏移怎么办
这不是代码问题，是 WebKit 渲染引擎的已知 bug：中英文混排、emoji、响应式字号都会导致行数判断失准：
- 模拟器测不出来，必须真机验证；尤其注意
font-size动态变化时的边界情况 - 放弃
-webkit-line-clamp，改用max-height+ 固定line-height+overflow: hidden组合（例如两行 ×line-height: 1.4em→max-height: 2.8em） - 避免在省略容器内嵌套
<strong></strong>等 inline 标签，它们可能干扰行盒生成 - 必须统一表现时，用 JS 判高度更稳：
element.scrollHeight > element.clientHeight，再逐词回退截取，注意用textContent避开 HTML 标签
真正麻烦的从来不是“怎么写”，而是“怎么让不同设备都看起来差不多”。-webkit-line-clamp 是快捷键，不是万能钥匙；一旦内容含中文、emoji 或响应式字号，行数控制就容易失准——这时候，老老实实用 JS 判高度，往往比调一堆 CSS 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
