-webkit-line-clamp 必须搭配 display: -webkit-box 使用，因其依赖 webkit 的 box 模型计算行高与截断位置；单独使用无效，且在 flex、grid 等布局下失效。
纯 CSS 实现多行文本截断并显示省略号，只能靠 -webkit-line-clamp，但它不是标准属性，不支持 Firefox 和部分旧版 Edge，也不能在 display: flex 或 display: grid 容器上直接用。
为什么 -webkit-line-clamp 必须搭配 display: -webkit-box
这个属性本身不独立工作，它依赖 WebKit 的 box 模型来计算行高和截断位置。一旦父容器用了 flex、grid 或 inline-block，-webkit-line-clamp 就会失效 —— 不是没效果，而是可能截 2 行变 1 行，或完全不截。
- 必须写全三件套：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: N -
overflow: hidden是必需的，否则多余文字会撑开容器 - 不要给容器设
height（除非你手动算好：行高 × 行数），否则容易和-webkit-line-clamp冲突导致截断错位 - Firefox 下完全无效，别指望加
-moz-line-clamp—— 它早被废弃了，现代 Firefox 不认
line-clamp 在不同浏览器里的实际表现差异
Chrome 120+、Safari 16.4+、Edge 116+ 都能稳定支持；但 Safari 15.6 及更早版本对中文字体行高计算有偏差，可能出现“明明还有空间却提前截断”。
- 中文场景下，建议用
line-height: 1.5这类无单位值，避免line-height: 24px这种固定像素值引发跨字体兼容问题 - 如果内容含
<br>
或内联元素（如<span></span>、图标），-webkit-line-clamp会把换行符也当一行算，导致实际显示少一行 - 响应式缩放时（比如 pinch-zoom on iOS），截断行数可能临时错乱，松手后才恢复 —— 这是 WebKit 已知渲染延迟，无法规避
不用 JavaScript 就想全浏览器兼容？现实点的做法
真要覆盖 Firefox、旧 Edge、甚至某些国产双核浏览器，CSS 单独做不到。这时候得接受一个事实：text-overflow: ellipsis 天然只管单行，多行必须妥协。
- 方案一：降级为单行截断 + 提示“点击查看全部”，交互成本换兼容性
- 方案二：服务端预截断（比如后端返回前 120 字 + “…”），前端只做展示，彻底绕开 CSS 截断逻辑
- 方案三：用
ResizeObserver+getClientRects()手动判断行数（注意：IE 不支持，需 polyfill），再切 class 控制显隐 —— 这才是“不用定位也能展开收起”的底层依据，但代价是 JS 介入
最常被忽略的一点：就算用了 -webkit-line-clamp，如果容器父级有 transform、filter 或 will-change，WebKit 有可能重置其包含块，导致截断失效。遇到这种问题，先查父级有没有这些属性，而不是怀疑 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
