-webkit-line-clamp仅在webkit/blink内核浏览器（chrome/safari/edge）中有效，需配合display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden；firefox虽支持无前缀line-clamp但不识别-webkit前缀且不兼容-webkit-box，ie则完全不支持。
line-clamp 不能靠“写对就完事”，必须明确区分哪些浏览器真支持、哪些只是假装支持，否则上线后文字全撑开。
为什么 -webkit-line-clamp 在 Firefox 里完全不生效
它不是 CSS 标准属性，而是 WebKit/Blink 内核的私有实现。Firefox（Gecko）从 68 版开始支持无前缀 line-clamp，但仅限于 display: block 或 inline-block 场景，且必须配合 overflow: hidden 和显式高度约束；而 display: -webkit-box 在 Firefox 中虽被识别，但 -webkit-line-clamp 会被直接忽略——这不是 bug，是引擎根本不处理这个前缀属性。
- Chrome/Safari/Edge（新版）：只认
-webkit-line-clamp，必须配display: -webkit-box+-webkit-box-orient: vertical+overflow: hidden - Firefox 68+：可认
line-clamp: 3，但不能和-webkit-box共存，否则整条规则失效 - IE11 及更早：所有相关属性均无效，
display: -webkit-box本身就不解析
怎么写才能让 Chrome 和 Firefox 都有基本截断效果
别试图用同一套 CSS 覆盖全部浏览器。务实做法是分层声明，让各浏览器各取所需：
.clamp-3 {
/* Chrome/Safari/Edge */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
<p>/<em> Firefox 68+ </em>/
line-clamp: 3;
display: block;
overflow: hidden;
max-height: 4.2em; /<em> 假设 line-height: 1.4em </em>/
}</p>
注意：display: -webkit-box 和 display: block 不能共存于同一选择器——浏览器会按顺序覆盖，最终生效的是后者。所以实际项目中建议拆成两个 class，或用 JS 检测后动态加类。
- 不要用
@supports (line-clamp: 3)做检测，它对私有属性返回false，不可靠 - 更稳妥的 JS 检测方式：
getComputedStyle(el).webkitLineClamp !== undefined判断是否支持前缀版 - Firefox 下若
line-clamp不生效，至少保证max-height+overflow: hidden能物理截断，避免布局崩塌
移动端真机上省略号消失或少截一行怎么办
iOS Safari 15.4–16.3 存在渲染层剪裁上下文断裂问题，尤其在中英文混排、font-size 动态变化时，-webkit-line-clamp 可能漏判第 N 行边界。模拟器测不出，必须真机验证。
- 临时缓解：加
word-break: break-word或overflow-wrap: break-word，减少跨行判断误差 - 放弃省略号，改用
max-height: calc(1.4em * 3)+line-height: 1.4em+overflow: hidden组合，至少保证视觉截断 - 避免在
-webkit-line-clamp元素内嵌<span></span>或<strong></strong>，它们可能干扰行盒生成，导致省略号位置偏移 - 如果用了 rem/vw 响应式字号，
max-height必须同步响应，否则大屏下提前截断、小屏下多出半行
JS fallback 截多少字符才不割裂语义
别按字数硬截。中文没空格、英文单词可能被劈开，用户看到 “…applica…” 就很奇怪。
- 优先用
el.getClientRects()获取每行 DOMRect，算出单行高度，再反推 N 行最大高度，最后设max-height启用 CSS 截断——JS 只探测，不干预渲染 - 若必须纯 JS 截断：用正则匹配中文字符、英文单词、标点，找最近的合理断点（如空格、顿号、句号后），再拼
"…" - 服务端预截更轻量：若内容长度可控（如标题 ≤ 30 字），直接后端截取 + 前端单行
text-overflow: ellipsis，避开所有多行兼容性坑
真正麻烦的不是怎么写 -webkit-line-clamp，而是它依赖的盒模型约束——没有 max-height 或固定 line-height，它连“第 3 行在哪”都算不出来。别只调数值，先确认容器有高度、方向、裁剪边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
