-webkit-line-clamp在iphone上“卡死”的根本原因是display:-webkit-box渲染模型与viewport缩放、动态字号及web font加载时机冲突，导致布局计算中断。
line-clamp 在小屏上失效、省略号不出现、点击后文字错位——根本原因不是写法错，而是它依赖的 display: -webkit-box 渲染模型和移动端视口缩放、字体加载时机存在冲突。
为什么 -webkit-line-clamp 在 iPhone 上经常“卡死”
常见现象：开发时 Chrome 模拟器正常，真机 Safari 下文字始终不截断，或只在页面 reload 后生效一次。这不是 bug，是 WebKit 对 -webkit-box 的布局计算被 viewport 缩放、font-size 动态调整（比如系统字号放大）、甚至 web font 加载延迟打断了。
实操建议：
- 确保父容器有明确的
width（别用100%+ 弹性布局混搭，尤其在flex容器里嵌套-webkit-box） - 避免在
font-size: clamp(...)的同一元素上直接套-webkit-line-clamp——Safari 会因单位混合延迟计算，优先用固定字号做截断，展开后再切回流体字号 - 给文本容器加
min-height: calc(1.5em * 3)（假设截 3 行），防止内容未渲染完成时高度塌陷导致截断失败
展开/收起切换时文字跳动或高度突变
纯 CSS 切换 -webkit-line-clamp 值（比如从 2 改成 unset）会导致浏览器重排，但没有过渡动画，视觉上就是“啪”一下撑开，用户感知生硬。
实操建议：
- 不要依赖
-webkit-line-clamp: unset做展开，改用max-height+transition控制高度变化，再配合overflow: hidden - 展开前先用 JS 读取
scrollHeight，设为max-height目标值，避免用固定值（如500px）导致长文本被裁或短文本留白 - 收起状态必须保留
display: -webkit-box，否则 Safari 会丢掉 box 模型，再次展开时省略号消失
Firefox 和部分安卓 WebView 怎么 fallback
Firefox 完全不支持 -webkit-line-clamp，很多安卓低端机 WebView 也只认一半。不能靠 UA 判断，得用特性检测。
实操建议：
- 用
CSS.supports('-webkit-line-clamp', '2')判断是否可用，不可用时走 JS 截断逻辑 - JS fallback 不要逐字删减（性能差、中文易断词），改用
getClientRects()测第 N 行末尾位置，再用textContent.substring(0, index)截到最近的句号/换行符 - 服务端渲染（如 Nuxt/Next）需预设一个安全行数（比如 2 行 ≈ 48px），客户端 hydration 后立刻补测真实行高并校准
最易被忽略的一点：line-clamp 的省略号是伪元素生成的，它不占 DOM 位置，但会参与行内布局计算——如果文本末尾有 inline 元素（比如图标、span），可能把省略号挤出可视区。调试时记得临时加 outline: 1px solid red 看实际渲染边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
