white-space: nowrap 禁止换行且合并空白符，文本强制单行显示，超宽则溢出；需配合 overflow: hidden 和 text-overflow: ellipsis 实现省略效果。
空格本身不会导致文字“自动换行”，真正触发换行的是浏览器对空白符序列（空格、制表符、换行符）的默认合并与折行逻辑。要避免因空格引发的意外换行，关键是控制 white-space 行为，而不是消灭空格。
white-space: nowrap 能禁掉所有换行，但会溢出
给容器加 white-space: nowrap 后，所有空白符（包括空格）会被合并成一个空格，且整段文本拒绝在容器边界处折行。
- 适合固定宽度内显示短文本，比如导航菜单项、按钮标签、ID 字段
- 缺点是：超长内容直接撑破容器或横向溢出，不加
overflow: hidden和text-overflow: ellipsis就不可控 - 注意：
nowrap对<td> 无效，除非同时设 <code>table-layout: fixed+ 明确列宽 +display: block用 替换空格可防断点，但别滥用
- 适用于关键分隔处，例如 “版本 v2.3.1”、“订单 #ABC123”，防止编号被切到下一行
- 连续多个
- 不要全篇替换空格——既难维护，又可能破坏屏幕阅读器对空白的解析逻辑
pre-wrap + overflow-wrap: break-word 应对混合场景
当文本里既有用户输入的换行/空格，又有 URL 或 Base64 这类无空格长串时，
white-space: pre-wrap是唯一能兼顾保留格式和防溢出的组合。-
pre-wrap保留原始空格和换行符，同时允许在容器边缘自动折行 - 必须额外加
overflow-wrap: break-word（不是word-break: break-all），否则长 URL 仍会溢出 - Flex 布局下记得给文本元素加
min-width: 0，否则换行逻辑被 Flex 默认的min-width: auto阻断
表格里空格换行最隐蔽，三要素缺一不可
在
<td> 里写 <code>white-space: nowrap却依然换行？大概率是以下三点没配齐：-
table元素必须设table-layout: fixed - 目标列需有明确宽度约束，如
width: 150px或通过<col width="150"> -
td必须设display: block或inline-block，否则 white-space 不起效
漏掉任意一项，空格就还是可能成为换行触发点——这不是 bug，是表格渲染模型本身的限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
