-webkit-line-clamp 必须搭配 display: -webkit-box 才生效，因其是 WebKit 对弹性盒的私有扩展；还需显式设置 -webkit-box-orient: vertical 和 overflow: hidden，且仅支持正整数行数，不兼容 Firefox，fallback 推荐伪元素渐变遮罩。
-webkit-line-clamp 是 WebKit 内核浏览器（Chrome、Safari、Edge 新版本）中实现多行文本截断最直接的方式，但它不是标准 CSS 属性，不被 Firefox 支持，且依赖特定 display 模式才能生效。
为什么 -webkit-line-clamp 必须搭配 display: -webkit-box
该属性本质是 WebKit 对弹性盒模型的私有扩展，只在 display: -webkit-box 下起作用。如果写成 display: flex 或 display: block，-webkit-line-clamp 完全无效。
-
-webkit-box-orient: vertical必须显式声明，否则文本不会按列堆叠 -
overflow: hidden不可省略，否则截断后多余行仍会显示 -
line-height与height无需严格匹配，但建议保持一致，避免底部留白或裁切错位
-webkit-line-clamp 的参数限制和常见失效场景
它只接受正整数（如 3），不支持变量、calc() 或响应式值；设为 0 或负数等同于未设置，文本不截断。
- 父容器不能有
padding（尤其padding-bottom），否则可能撑开高度导致第 N 行完整显示 - 子元素含
inline元素（如<span>、<em>）时，换行逻辑可能异常，建议用纯文本或包裹一层div - 在
transform或will-change触发的合成层中，部分旧版 Chrome 可能渲染错乱
兼容性 fallback 方案怎么加才不破坏布局
Firefox 和部分国产浏览器内核不识别 -webkit-line-clamp，纯靠它上线等于放弃非 WebKit 用户。但用 JS 计算行高再截断又重又难维护。
立即学习“前端免费学习笔记（深入）”；
- 优先用「伪元素 + 渐变遮罩」方案：用
::after绝对定位在右下角盖一层白色渐变，视觉上模拟省略号，overflow: hidden保证内容不溢出 - 避免用浮动（
float）+:first-child的老式 hack，容易和 Flex/Grid 布局冲突，且在缩放或字体变化时错位 - 若必须 JS 控制，不要监听
window.resize频繁重算，改用ResizeObserver监听容器尺寸变化
真正麻烦的不是写对那四行 CSS，而是当设计师要求「三行刚好卡在句号后」「移动端缩到两行但保留省略号」「支持中英文混排且不把标点挤到行首」——这些边界情况，-webkit-line-clamp 本身无法解决，得靠组合策略兜底。
