white-space: nowrap 本身不撑父容器，但会触发 Flex 子项默认的 min-width: auto 保护机制，使其拒绝收缩至最小内容宽度以下，导致子项变宽并撑开父容器；必须加 min-width: 0 解除保护，并配合 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap 才能实现单行省略。
因为 white-space: nowrap 会禁用文本换行，而 Flex 子项默认有 min-width: auto 保护，两者叠加后子项拒绝收缩，直接撑开父容器。
Flex 子项加 white-space: nowrap 为什么必溢出
这不是 nowrap 的 bug，是它和 Flex 默认行为的叠加结果。浏览器规定：flex item 不会收缩到小于其“最小内容宽度”（minimum content size）。加了 white-space: nowrap 后，长单词或连续无空格文本无法折行，“最小内容宽度”就被拉高；而 flex-shrink: 1（默认）在压缩时一碰到这个底线就停住——子项物理宽度变大，父容器自然被撑开。
常见现象：
- 开发者工具里看到该元素的
computed min-width是一个超长单词（如"UserProfileSettingsButton"）的原始宽度 - 父容器没设
width或max-width，溢出直接突破视口边界，移动端尤其明显 - 明明写了
overflow: hidden，但根本没生效——因为子项压根没缩，内容根本没“溢出”，只是被强行摊开在一行
text-overflow: ellipsis 不生效的真正原因
四件套缺一不可，且必须作用于同一元素：white-space: nowrap、overflow: hidden、text-overflow: ellipsis、min-width: 0。漏掉 min-width: 0 是最常见原因。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
min-width: 0是解除min-width: auto保护的开关，不加它，子项根本不缩，后面三个属性全白配 -
span等内联元素默认不支持text-overflow，必须显式设display: block或inline-block -
max-width: 100%比width: 100%更安全，尤其嵌套 flex 场景下能避免父级 width 计算失效 - 更稳妥写法：
width: 0; min-width: 0; max-width: 100%，强制重置宽度计算起点
非 Flex 场景下 white-space: nowrap 溢出怎么解
如果容器不是 Flex，但仍有溢出，大概率是 white-space: nowrap 锁死了换行开关，或者容器本身没形成 BFC 导致宽度计算失效。
排查与修复建议：
- 先检查目标元素的
computed white-space是否真的是nowrap—— 很多时候是继承自父级（比如按钮、表格单元格、导航项） - 若不需要单行截断，优先改回
white-space: normal（white-space: wrap是非法值，别用） - 若需保留空格格式又允许折行，用
white-space: pre-wrap - 给容器加
max-width: 100%或具体值，并确保它处于一个有明确宽度上下文的环境（比如父级触发 BFC） - 避免用
overflow: hidden掩盖问题——它只是藏起来，不解决换行逻辑
真正容易被忽略的是：溢出从来不是单一属性的问题，而是 white-space、min-width、flex-shrink、max-width 这几者在盒模型不同层级上的协同或冲突。调试时一定要打开开发者工具，逐层看 computed 值，而不是只盯着你写的那几行 CSS。
