怎样修复CSS多行文本溢出Ellipsis在非Webkit浏览器失效

-webkit-line-clamp 仅在 chrome、safari、chromium edge 及 firefox 119+（需开启实验 flag）中生效，firefox 118 及更早版本完全忽略该属性及配套声明，导致 display 保持 block、文字溢出且无省略号。

怎样修复css多行文本溢出ellipsis在非webkit浏览器失效_利用clamp属性

-webkit-line-clamp 在 Firefox、旧版 Edge 和部分 WebView 中根本不会生效，这不是配置问题，是浏览器根本不识别该属性。 它只在 Chrome、Safari、Edge（Chromium 内核）及 Firefox 119+（需开启实验 flag）中可用；Firefox 118 及更早版本会静默忽略 -webkit-line-clamp、display: -webkit-box 等整套声明，连布局都按默认 block 渲染，文字自然溢出。

为什么 Firefox 里写了 -webkit-line-clamp 却完全没反应

根本不是漏写了某条 CSS，而是浏览器引擎压根不解析这些带 -webkit- 前缀的规则。你看到的“没效果”，其实是整套声明被跳过——display: -webkit-box 失效 → -webkit-box-orient: vertical 失效 → -webkit-line-clamp: 2 彻底失效 → 溢出未裁剪 → 省略号当然不会出现。

用开发者工具检查计算样式，会发现 display 值仍是 block，不是 -webkit-box
text-overflow: ellipsis 对多行无效，加了也白加，别指望它补救
不要尝试用 @supports (line-clamp: 2) 来检测——Firefox 118 不支持该特性查询，条件永远为 false

Firefox / IE / 旧 WebView 的安全降级方案

纯 CSS 没有跨浏览器通用解法。必须接受「省略号仅 WebKit 可见」，或主动 fallback。推荐按优先级选择：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

视觉降级：对非 WebKit 浏览器只设 max-height + overflow: hidden，不加省略号。虽无 …，但至少不撑破容器
伪省略：用 ::after 渐变遮罩盖住末尾（需配合精确 max-height 和固定 line-height），适合深色/浅色背景可预设的场景
JS 动态截断：监听 element.scrollHeight > element.clientHeight，再逐词回退截取 + 添加 …；注意用 textContent 避免 HTML 标签干扰，且应配合 ResizeObserver 防止重绘抖动

Chrome/Firefox 行为不一致时最容易踩的坑

同一段 CSS，在 Chrome 里显示两行加 …，Firefox 里却显示三行还溢出——往往不是浏览器 bug，而是你依赖了 WebKit 特有的渲染路径：

把 -webkit-line-clamp 直接写在 flex 子项上：Chrome 可能勉强兼容，Firefox 因 display: -webkit-box 失效，直接退回 flex 布局，高度失控
容器设了 height: 40px 但 line-height: 1.6 + 字体大小动态（如 font-size: 1.1rem）：WebKit 计算行数较宽松，Firefox 按标准盒模型渲染，实际行高偏差导致截断错位
文本含 <strong></strong> 或 emoji：WebKit 的行盒生成逻辑与标准不同，Firefox 下 inline 元素基线对齐更严格，可能多占半行

真正麻烦的从来不是「怎么让 Chrome 显示 …」，而是「怎么让 Firefox 不撑开容器还看起来差不多」。当你发现调试半天仍无法对齐行数，不如直接放弃 -webkit-line-clamp，改用 max-height + line-height 整除值 + overflow: hidden 这套稳定组合——它不漂亮，但可靠。