-webkit-line-clamp 是 webkit 私有属性，firefox 和 ie 完全不支持，仅 chromium 内核浏览器（如新版 edge、chrome、safari）可用；正确使用需同时满足：width/max-width、display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden；兼容方案需用 js 动态截断或 clamp.js。
纯 CSS 实现多行省略号在 Chrome、Safari 等 WebKit 内核浏览器中可行，但 Firefox 和 IE 完全不支持 -webkit-line-clamp，直接用会白屏或截断失效——别硬套，先看兼容性再决定是否上。
为什么 -webkit-line-clamp 不能无脑用
这个属性根本不在 CSS 规范里，是 WebKit 私有扩展。Firefox 从 2019 年起明确拒绝实现，IE 全系无视，Edge 新版（Chromium 内核）才支持。如果你的用户里有稳定使用 Firefox 的政企/教育场景，或者需要支持旧版 Edge，它就等于没用。
常见错误现象包括：
- 文本完全不截断，溢出撑开容器
- 省略号出现在错误位置（比如第二行末尾）
- 设置了
-webkit-line-clamp: 2却只显示 1 行甚至 0 行
根本原因通常是漏了配套属性或容器未约束宽度/高度。
-webkit-line-clamp 正确写法与必要条件
必须同时满足以下全部条件，否则无效：
- 容器设了明确的
width或max-width（百分比、vw都行，但不能是auto） -
display: -webkit-box（不能用flex或grid替代） -
-webkit-box-orient: vertical（注意拼写，不是orientation） -
overflow: hidden（text-overflow: ellipsis在多行下只是“锦上添花”，非必需）
示例：
.multi-ellipsis {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
Firefox / IE 下真正能用的替代方案
不要寄希望于“加个前缀”或“CSS fallback”，这些浏览器对 -webkit- 前缀完全忽略。可靠路径只有两条：
-
用 JavaScript 动态截断：监听元素渲染后计算行高 × 行数，对比
scrollHeight，手动截字符串 + 加…。适合内容少、DOM 不频繁更新的场景 -
引入
clamp.js：轻量（~2KB），支持{ clamp: 3 }、{ clamp: 'auto' }、甚至按像素高度截断。调用简单：$clamp(el, { clamp: 3 })
注意：服务端渲染（SSR）或首屏直出时，JS 截断会有闪动；若强依赖首屏静态效果，建议服务端预截 + 前端再校验。
最易被忽略的一点：多行省略号不是“样式问题”，而是“布局+测量+渲染”三阶段协同结果。WebKit 方案省掉了 JS 测量，但代价是放弃兼容性；JS 方案通用，但得自己处理字体加载、行高变化、resize 重算等边界情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
