如何兼容Chrome、Safari和Firefox的CSS多行截断-css教程-PHP中文网

firefox 125+才原生支持-webkit-line-clamp，旧版需用max-height+::after回退；@supports(-webkit-line-clamp:1)或(line-clamp:1)检测，禁用-moz前缀和ua判断。

如何兼容chrome、safari和firefox的css多行截断

-webkit-line-clamp 在 Chrome/Safari 有效，Firefox 125+ 才原生支持，旧版必须回退

为什么 -webkit-line-clamp 在 Firefox 里不生效

Firefox 直到 125 版本（2024 年中发布）才正式支持 -webkit-line-clamp，此前所有版本完全忽略该属性。即使你写了 display: -webkit-box 和 -webkit-box-orient: vertical，Firefox 仍按普通块级元素渲染，overflow: hidden 只会裁剪底部，不会触发省略号。

常见错误现象：text-overflow: ellipsis 在 Firefox 中对多行无效；控制台无报错，但视觉上文字直接溢出或被粗暴截断。

不要指望 Autoprefixer 自动补 -moz- 前缀——-moz-line-clamp 从未被实现，纯属误解
不能靠 @supports (display: -webkit-box) 检测，因为 Firefox 也支持 display: -webkit-box（只是不触发截断逻辑）
真正可用的特性检测是：@supports (-webkit-line-clamp: 1) or (line-clamp: 1)，但后者仅在极新内核中存在

给 Firefox 降级用 max-height + 伪元素方案

当检测到不支持 -webkit-line-clamp 时，最稳妥的纯 CSS 回退是固定容器高度 + ::after 覆盖末尾：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

.clamp-text {
  max-height: 3em; /* 行高 × 行数，例如 line-height: 1.5em → 3em = 2 行 */
  overflow: hidden;
  position: relative;
}
.clamp-text::after {
  content: '…';
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* 必须与背景色一致 */
  padding-left: 4px;
}

这个方案的关键点：

max-height 必须严格匹配行高 × 行数，否则可能多露半行或少截一行
::after 的 background 不是装饰，是用来遮住被截断文字末尾的“毛边”，避免字符残影
中文场景下建议加 word-break: break-word，防止长单词撑破容器
不能和 flex 或 grid 容器混用——position: relative 依赖块级流式布局

如何安全检测并切换方案

别用 JS 动态判断 UA，优先用 CSS @supports 分层加载：

@supports (-webkit-line-clamp: 2) {
  .clamp-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@supports not (-webkit-line-clamp: 2) {
  .clamp-text {
    max-height: 3em;
    position: relative;
    overflow: hidden;
  }
  .clamp-text::after {
    content: '…';
    position: absolute;
    bottom: 0;
    right: 0;
    background: white;
    padding-left: 4px;
  }
}

注意实际兼容边界：