-webkit-line-clamp非万能解法，因仅WebKit内核浏览器支持，Firefox等完全不识别；它必须与display: -webkit-box、-webkit-box-orient: vertical及overflow: hidden共存才生效，且需宽度约束与合理高度控制以实现跨浏览器兼容。
为什么 -webkit-line-clamp 不是万能解法
它只在 WebKit 内核浏览器（Chrome、Safari、Edge 新版、绝大多数安卓/ iOS 浏览器）中生效，Firefox 和旧版 Edge 完全不识别 -webkit-line-clamp、-webkit-box-orient 这类私有属性。哪怕你写全了 display: -webkit-box + -webkit-line-clamp: 2 + overflow: hidden，在 Firefox 打开就是原样换行、无省略号。这不是你漏写了样式，是浏览器根本没实现这个非标准特性。
-webkit-line-clamp 必须搭配的三个声明
单独写 -webkit-line-clamp: 2 没有任何效果。它必须和以下两个声明共存，且缺一不可：
-
display: -webkit-box—— 启用老式弹性盒模型，不是现代display: flex -
-webkit-box-orient: vertical—— 告诉盒子子元素垂直堆叠，否则-webkit-line-clamp不知道“行”怎么算
另外，overflow: hidden 是强制要求，用来裁掉超出部分；text-overflow: ellipsis 在多行场景下多数浏览器忽略，可写可不写。
用 max-height + line-height 模拟多行截断（兼容 Firefox）
当需要真正跨浏览器支持（尤其含 Firefox），就得放弃纯 CSS 的“一行声明搞定”幻想，转而用高度控制+视觉遮罩：
立即学习“前端免费学习笔记（深入）”；
- 给容器设固定
line-height（如1.5em）和精确max-height（如3em × 1.5 = 4.5em） - 加
overflow: hidden裁掉溢出内容 - 用
::after在右下角叠加渐变遮罩（background: linear-gradient(to right, transparent, #fff 70%)），掩盖被截断文字的锯齿边缘
缺点是：若文本恰好卡在行尾未超限，::after 仍会显示，造成“假省略号”；需 JS 动态判断是否真溢出再开关伪元素，但纯 CSS 方案只能接受这点瑕疵。
实际开发中最容易被忽略的细节
一是 width 或 max-width 必须存在——没有宽度约束，white-space: nowrap（单行）或 -webkit-line-clamp（多行）都失去参照基准；二是父容器不能有 display: inline 或未设置 min-width: 0（在 Flex/Grid 中），否则子元素可能撑宽导致截断失效；三是移动端要注意 viewport 缩放和字体渲染差异，同一 max-height 在 iOS Safari 和 Chrome Android 上可能差半行。
