firefox 125之前完全不支持-webkit-line-clamp，该属性在旧版firefox中被忽略，导致多行文本无法显示省略号；可靠方案是用@supports (-webkit-line-clamp: 1) or (line-clamp: 1)检测并配合伪元素fallback。
Firefox 125之前完全不支持-webkit-line-clamp
它不是“兼容性差”，而是压根不识别该属性。哪怕你写了display: -webkit-box和-webkit-box-orient: vertical，Firefox 124及更早版本仍当普通块级元素渲染，overflow: hidden只裁剪底部，不会触发省略号。
常见错误现象：text-overflow: ellipsis在多行场景下无效；控制台无报错，但文字直接溢出或被粗暴截断；行数设为3却只显示1行——这通常不是代码写错，是浏览器能力缺失。
别试-moz-line-clamp，它从未被实现，Autoprefixer也不会补这个前缀；也别用@supports (display: -webkit-box)检测，因为Firefox确实支持display: -webkit-box（只是不联动截断逻辑）。
真正可用的特性检测写法
用@supports (-webkit-line-clamp: 1) or (line-clamp: 1)做条件加载。前者覆盖 Chrome/Safari/Edge，后者仅 Firefox 125+ 支持（2024年中发布），目前可视为兜底信号。
示例：
.text {
/* 默认 fallback */
max-height: 3em;
overflow: hidden;
position: relative;
}
.text::after {
content: '…';
position: absolute;
bottom: 0;
right: 0;
background: white; /* 必须与背景色一致 */
padding-left: 4px;
}
<p>@supports (-webkit-line-clamp: 1) or (line-clamp: 1) {
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
max-height: unset;
}
.text::after {
display: none;
}
}</p>
伪元素 fallback 的关键细节
这个方案看着简单，实操容易翻车：
-
max-height必须严格等于line-height × 行数（比如line-height: 1.5em→ 两行就是3em），否则会多留空白或切掉半行字 -
::after的background必须和父容器背景色完全一致，否则在深色/渐变背景下露馅 - 不能依赖
text-overflow: ellipsis——它对多行无效，纯属干扰项 - 若文本含
<strong></strong>等内联标签，伪元素覆盖位置可能偏移，需加transform: translateY(-1px)微调
为什么不用 JS 截断？
JS 方案（如测量行高、逐字截断）看似通用，但问题不少：
服务端渲染（SSR）首屏会闪动：HTML 初始是完整文本，JS 加载后才截断；
动态内容（如用户编辑、i18n 切换）需重复监听和重算，易漏或卡顿；
长单词（URL、技术名词）仍可能被硬切，而 CSS word-break: break-word能自动处理；
无障碍支持弱：屏幕阅读器可能读到被 JS 截掉的部分，或把“…”当真实内容。
真正麻烦的不是写三行 WebKit CSS，而是得随时意识到：你写的每一处-webkit-line-clamp，背后都站着一个看不到省略号的 Firefox 用户，以及一段可能被截成半截的 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
