line-clamp并非仅限webkit内核，chrome、edge（chromium版）、safari及firefox 119+均支持，但firefox 118及更早版本完全不识别；需搭配display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden三件套使用，且父容器须为块级、有明确高度或max-height。
line-clamp只在WebKit内核生效？
不是“只”在WebKit生效，而是line-clamp作为CSS属性，目前**仅被Chrome、Edge（Chromium版）、Safari及新版Firefox（119+）支持**；旧版Firefox（118及之前）完全不识别该属性，会静默忽略。这意味着如果你的用户里还有用Firefox 117的政企内网环境，line-clamp直接失效，文字不会截断也不会加省略号。
实操建议：
- 必须搭配
display: -webkit-box和-webkit-box-orient: vertical使用，缺一不可——这是WebKit系实现多行截断的底层机制，不是可选装饰 - 对Firefox兼容有硬需求时，不能只靠
line-clamp，得 fallback 到 JavaScript 方案（如用textContent+canvas.measureText或getClientRects()动态截断） - 别在
flex或grid容器上直接套line-clamp，它要求父元素是块级盒模型，否则-webkit-box布局不触发
为什么设置了line-clamp却没省略号？
最常见原因是**溢出控制没关严**：即使写了line-clamp: 2，如果容器没设overflow: hidden，文字照样撑开容器、不隐藏多余行，更不会显示…。
实操建议：
- 三件套必须同时存在：
display: -webkit-box、-webkit-box-orient: vertical、line-clamp: N，且父容器需有明确高度或max-height（否则line-clamp可能不触发） -
overflow: hidden要写在**同一元素**上，不能只写在祖先层；如果中间某层有overflow: visible或auto，会切断剪裁上下文 - 避免和
text-overflow: ellipsis混用——后者只对单行有效，和line-clamp无关，加了也没用
line-clamp在移动端iOS Safari表现异常？
是的，iOS 15.4–16.3 的 Safari 存在已知bug：当文本含中文或混合中英文时，line-clamp可能少截1行，或末尾省略号位置偏移甚至消失。根本原因是WebKit对复杂字形换行计算不一致。
实操建议：
- 测试必须真机跑，模拟器和桌面Safari无法复现该问题
- 临时缓解：给容器加
word-break: break-word或overflow-wrap: break-word，强制软换行，减少跨行计算误差 - 若内容结构允许，改用固定行高+
max-height+overflow: hidden组合，虽然不自动加…，但至少能稳定截断
CSS多行省略号性能比JS方案好吗？
是，但只在静态场景下成立。line-clamp由渲染引擎原生处理，无JS执行开销，也无需监听resize或字体加载事件。但一旦文本动态更新（比如Vue响应式赋值、React状态更新），浏览器不会自动重算line-clamp是否生效——它不像JS那样能主动判断“现在是不是超了3行”。
实操建议：
- 纯静态内容（如文章摘要、卡片标题）优先用
line-clamp，简洁可靠 - 动态内容（如实时评论、搜索结果预览）务必加一层保障：用
ResizeObserver监听容器尺寸变化，或在数据更新后手动触发getComputedStyle检查scrollHeight > clientHeight - 别在大量列表项（比如100+条feed）里无差别用
line-clamp，部分老机型渲染压力会上升，尤其配合CSS动画时
真正麻烦的从来不是怎么写那三行CSS，而是你没法靠DevTools一眼看出“这里到底截没截住”——line-clamp没有伪类钩子，也不抛错误，它只是安静地失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
