-webkit-line-clamp需配合display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden才能生效，单独使用无效；它仅支持WebKit/Blink内核浏览器，Firefox不支持，且与flex/grid布局互斥。
-webkit-line-clamp 能实现多行文本截断加省略号，但它不是标准属性，只在基于 WebKit/Blink 的浏览器（Chrome、Safari、Edge）中生效，Firefox 完全不支持，且必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能起作用。
为什么只写 -webkit-line-clamp 没反应？
单独设置 -webkit-line-clamp 是无效的——它只是“开关”，真正控制布局的是 display: -webkit-box 这套老式弹性盒模型。现代 display: flex 或 grid 下它完全不工作。
- 必须用
display: -webkit-box（不能是flex） - 必须设
-webkit-box-orient: vertical - 必须设
overflow: hidden（否则文字会撑开容器） -
line-clamp值为整数，如2表示最多显示 2 行
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
移动端适配要注意什么？
在 iOS Safari 上，如果父容器没有明确高度或 max-height，有时会因渲染时机问题导致省略号不出现；Android Chrome 则对字体大小变化更敏感。
- 推荐给容器设
max-height（例如max-height: 40px），值 ≈ 行高 × 行数 - 避免用
rem或em动态计算max-height，iOS 旧版 Safari 可能不同步更新 - 文字内含
<br>、<span></span>等内联元素时，-webkit-line-clamp仍按纯文本流处理，但换行行为可能异常
Firefox 不支持怎么办？
Firefox 没有等效的原生方案，也不能靠 JS 模拟“精确截断到第 N 行”（因为行高受字体、缩放、DPR 影响太大）。务实做法是降级：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports not (-webkit-line-clamp: 1)区分支持状态 - Firefox 下改用单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 或者服务端/构建时预截断（比如限制字符数 + 后端补省略号），适合评论摘要等场景
@supports not (-webkit-line-clamp: 1) {
.clamp-2 {
white-space: normal;
overflow: hidden;
text-overflow: clip;
}
}
真正难的不是写对这三行 CSS，而是当设计要求“严格两行，且最后一行末尾必须有省略号”时，在 Firefox 和部分低端 Android WebView 里，你得接受它做不到——这时候该推动产品接受降级方案，而不是堆 JS 补丁。
