line-clamp 必须与 display: -webkit-box 和 -webkit-box-orient: vertical 配合使用才能实现多行省略，单独设置无效；它与响应式函数 clamp() 无关，且不兼容 IE，需结合 max-height 降级或 JS 方案。
多行文本省略用 line-clamp 还是 -webkit-box？
直接说结论：line-clamp 是标准属性，但必须和 display: -webkit-box 搭配才能生效——它本身不是独立可用的“函数”，而是 -webkit-box 的一个限制性属性。单独写 line-clamp 不会起作用，浏览器会直接忽略。
line-clamp 必须配 display: -webkit-box 才能工作
这是最常踩的坑：以为加了 line-clamp: 2 就完事，结果文本照常撑开。实际需要三件套同时存在：
-
display: -webkit-box（不能用flex或block） -
-webkit-box-orient: vertical（指定盒子垂直堆叠） -
-webkit-line-clamp: N（N 是要显示的行数）
缺一不可。现代 Chrome/Firefox/Safari 都支持这套组合，但 Firefox 从 68+ 才开始支持 -webkit-line-clamp（仍需前两个声明），旧版 Safari 则只认 -webkit- 前缀。
为什么不用纯 CSS 的 clamp() 函数？
clamp() 是用于响应式长度计算的函数，比如 font-size: clamp(1rem, 2.5vw, 1.5rem)，和文本截断完全无关。把它和 line-clamp 混淆，是因为名字里都有 “clamp” —— 但一个是布局计算函数，一个是 WebKit 的行数限制属性，底层机制、使用场景、浏览器解析方式全都不一样。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：white-space: nowrap; text-overflow: ellipsis; 这只能处理单行；想截多行，绕不开 -webkit-box 那套。
兼容性和 fallback 要怎么处理？
没有原生的跨浏览器多行省略方案，-webkit-box 方案在 IE 完全不支持，Edge 17+ 才开始支持，Firefox 支持但依赖前缀。如果项目还要兼容老版本 Edge 或 IE，就得上 JS 方案（如 clamp.js）或服务端截断。
纯 CSS 场景下，可加一层降级：
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
/* fallback：对不支持的浏览器，至少保证不撑破容器 */
max-height: 3.6em;
line-height: 1.2;
}注意：max-height 无法精确对应行数（受字体、字号、行高影响），只是视觉近似，且可能切字。
真正难搞的是中英文混排、CJK 字体、变宽 emoji——这些会让 -webkit-line-clamp 实际截断位置浮动，有时差半行。上线前一定得在真机上测。
