Firefox旧版（≤78）对min-width:0解析不一致，需用无单位0、显式display:block、max-width:100%及overflow-wrap:break-word等组合兜底，否则text-overflow:ellipsis失效。

Firefox 旧版对 min-width: 0 解析不一致

Firefox ≤ 78（ESR 版本线止于 2021 年）在 flex 子项上对 min-width: 0 的处理存在兼容性偏差：它可能仍沿用 min-width: auto 的隐式逻辑，尤其当子元素是 inline 或含 white-space: nowrap 时，min-width: 0 不会真正覆盖默认最小宽度。DevTools 中检查 computed 样式，若看到 min-width 仍是 auto 或 fit-content，就是这个原因。

• min-width: 0px 和 min-width: 0% 在旧 Firefox 中基本无效，必须坚持用无单位的 min-width: 0
• 可临时降级使用 flex-shrink: 0 + overflow: hidden 组合兜底，但注意这会彻底禁用收缩，需配合明确 max-width 控制宽度上限
• 若文本容器是 span 等行内元素，display: block 必须显式声明，旧版 Firefox 对行内元素的 text-overflow 支持更严格

text-overflow: ellipsis 在 Firefox 中依赖 block 上下文更死板

旧版 Firefox 要求触发 text-overflow: ellipsis 的元素不仅得是块级，还必须有「可测量的、非自动的宽度约束」。仅靠 flex: 1 或 flex: 1 1 0 推导出的宽度，在渲染早期可能被识别为未定尺寸，导致省略号不绘制。

• 优先给文本容器加 max-width: 100%（或具体像素值），确保宽度上下文明确可测
• 避免用 flex: 1，改用 flex: 1 1 0 + 显式 min-width: 0，并在必要时补一句 flex-basis: 0%（Firefox 78 及更早版本对 0 像素值解析不稳定）
• 确认父 flex 容器没有 flex-wrap: wrap —— 旧 Firefox 在 wrap 模式下对单行截断逻辑支持更弱

长 URL 或连续英文单词在旧 Firefox 中完全不折行

即使配齐 min-width: 0 + white-space: nowrap + overflow: hidden + text-overflow: ellipsis，旧 Firefox 对 https://... 或 xxxxxxxxx 这类无空格字符串仍会无视溢出边界，直接撑宽容器。这不是省略号失效，而是它压根没进入“溢出裁剪”流程。

page-agent 浏览器控制（CDP）

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

下载

• 必须额外加 overflow-wrap: break-word（旧名 word-wrap: break-word 兼容性更好）
• word-break: break-all 虽然能强制断字，但在旧 Firefox 中易导致中英文混排错乱，不推荐用于标题/名称类文本
• 若容器本身无 width 或 max-width，overflow-wrap 也无参照基准——这是旧版 Firefox 最常被忽略的前提

调试时最该盯住的三个 computed 值

在 Firefox 开发者工具中，不看声明，只看 Computed 面板的实时计算结果：

• min-width 必须是 0px（不是 auto、0% 或 fit-content）
• flex-basis 应稳定为 0px（若显示为 0% 或 auto，说明 flex: 1 1 0 未正确解析）
• white-space 必须是 nowrap（旧 Firefox 会继承父级 normal，哪怕你写了也不生效，必须写在目标元素上）

这些值不对，其他所有样式都是徒劳——旧版 Firefox 的 flex 截断，本质是尺寸链在渲染早期就断掉了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！