white-space: normal仅在空格或换行符处换行，无法处理无分隔符长串；需配合width/max-width、overflow-wrap: break-word及word-break: normal才能可靠折行。
white-space: normal 是实现文本自动换行最基础、也最容易被误用的方案——它确实会换行，但前提是内容里有空格或换行符，且容器宽度受限；纯中文长串、无空格URL、超长英文单词仍会溢出。
为什么 white-space: normal 有时不换行
这个值只负责「合并连续空白 + 在空白处换行」，它不会主动切断单词或汉字。常见失效场景包括：
- 中文段落里夹着一长串无空格字符（如
aaaaaaaaaaaaaaaaaaaa或测试测试测试测试测试测试） - URL、Base64 字符串、日志 ID 等无自然断点的内容
- 父容器未设置
width或max-width，导致浏览器认为“有足够空间”，拒绝折行
配合哪些属性才能真正可靠换行
单靠 white-space: normal 不够，必须组合使用：
- 给容器设
width或max-width（否则换行逻辑无触发依据） - 加
overflow-wrap: break-word：在必要时进单词内断（如supercalifragilistic→super-<br>califragilistic
） - 加
word-break: normal（显式重置，避免继承或全局样式干扰）
完整推荐写法：
text-container {
width: 100%;
max-width: 300px;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
}
white-space: normal 和 pre-wrap 的关键区别
别以为 pre-wrap 只是“多保留换行符”——它的换行策略更积极：
-
normal：只在空格/制表符/换行符位置换行；无视长单词溢出 -
pre-wrap：保留原始换行与空格，同时允许在任意字符间断行（行为上等效于加了overflow-wrap: anywhere） - 所以纯中文卡片、用户输入的地址字段，用
pre-wrap比normal更省心
真正容易被忽略的是：移动端小屏下，normal 配合未约束宽度的 flex 容器，常导致横向滚动而非换行——这问题不是属性失效，而是布局上下文没给它换行的机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
