-webkit-line-clamp 仅在 Chrome、Safari、Chromium Edge 及 Firefox 119+（需开启实验 flag）中生效，Firefox 118 及更早版本完全忽略该属性及配套声明，导致 display 保持 block、文字溢出且无省略号。
-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。推荐按优先级选择：
- 视觉降级：对非 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>或 emoji：WebKit 的行盒生成逻辑与标准不同，Firefox 下 inline 元素基线对齐更严格，可能多占半行
真正麻烦的从来不是「怎么让 Chrome 显示 …」，而是「怎么让 Firefox 不撑开容器还看起来差不多」。当你发现调试半天仍无法对齐行数，不如直接放弃 -webkit-line-clamp，改用 max-height + line-height 整除值 + overflow: hidden 这套稳定组合——它不漂亮，但可靠。
