white-space: nowrap仅禁止文本因空白符自动换行，不控制容器宽度或盒模型；生效需配合overflow: hidden、text-overflow: ellipsis及明确宽度等条件。
white-space: nowrap 本身不控制换行触发条件
white-space: nowrap 只负责一件事：忽略空格、制表符、换行符带来的换行机会。它不干预容器宽度、不裁剪内容、不改变盒模型尺寸计算逻辑。所以你看到“文字换行了”，大概率不是它失效，而是换行根本不由它管——比如父容器太窄，或者子元素被 flex 压缩后视觉上“折成两行”（实际是容器撑高，内容溢出）。
常见真因：flex 容器中子项被压缩又溢出
在 display: flex 容器里，white-space: nowrap 往往配合 flex-shrink: 1（默认值）一起工作，结果就是：文字坚决不折，但 flex 项被压扁 → 内容横向溢出 → 浏览器为防布局崩溃，把溢出部分“推”到下一行显示（尤其在 Safari 和老版 iOS 上）。
- 给文字所在子项加
flex-shrink: 0或min-width: 0（后者对 iOS Safari 更有效） - 确认父容器是否设置了
flex-wrap: wrap；没设的话，所有子项硬挤一行，溢出后行为不可控 - 避免同时使用
word-break: break-all或overflow-wrap: break-word，它们会主动断词，直接覆盖nowrap效果
text-overflow: ellipsis 不生效的隐藏前提
想让省略号出现，white-space: nowrap 只是三件套之一。漏掉任意一个，就只看到溢出或折行：
- 必须有明确宽度约束：
width或max-width（fit-content、100%在 flex 子项里常失效） - 必须配
overflow: hidden；否则内容直接溢出，浏览器连裁剪动作都不做 - 元素需为块级或
display: inline-block；display: inline不支持text-overflow - iOS Safari（尤其 15.4 之前）需额外加
min-width: 0到 flex 子项上，否则渲染引擎跳过省略逻辑
容易被忽略的干扰源：不可见字符与继承污染
服务端或 CMS 输出的文本里可能混入零宽空格（\u200b）、不间断空格（\u00a0），这些字符会被 white-space 规则识别为“可换行点”。即使你写了 nowrap，浏览器仍可能在这些位置折行。
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具选中文字，右键「Edit as HTML」看原始字符，或用 JS 检查
textContent.replace(/\s/g, '_')是否出现异常下划线 - 检查 computed 样式里的
white-space值，确认没被父级的pre、pre-line或第三方 UI 库（如 Ant Design 的.ant-tag）覆盖 - 浮动容器内文字不换行，大概率是继承了
white-space: nowrap，而非浮动本身导致
white-space: nowrap 是开关，不是保险丝；它打开单行模式，但后续的宽度围栏、溢出策略、渲染上下文，一个都不能少。 
