CSS文字换行异常主因是word-break与white-space属性组合不当：前者控制单词内断行逻辑，后者决定空格和换行符处理方式；需依内容结构（如是否有换行符、长无空格串、中英混排）选择合理组合。
文字换行异常，通常不是字体或内容本身的问题，而是 CSS 中 word-break 和 white-space 的组合行为没理清。这两个属性控制着“在哪断”和“要不要断”，稍一错配，就会出现该断不断、不该断乱断、空格消失、英文挤成一团等情况。
先搞懂核心区别：white-space 管“空格与换行符”，word-break 管“单词内部怎么断”
white-space 决定是否保留原始空格、制表符、换行符，以及是否允许文本在空格处自动换行。常见值有：
-
normal：合并空白符，允许在空格/连字符处换行（默认） -
nowrap：合并空白符，但禁止任何换行（哪怕超容器宽度） -
pre-wrap：保留所有空白符（包括换行），同时允许在空格和必要时（如超宽）换行 -
pre-line：合并多余空格，但保留换行符，并允许在空格处换行
word-break 则专注解决长单词、连续无空格字符串（如 URL、一串英文、手机号）的断行逻辑：
-
normal：按语言规则断（中文每字可断，英文只在空格/连字符处断） -
break-all：强制在任意字符间断行（中英文都可断），适合窄容器展示长 ID 或路径 -
keep-all：中文不断字（整词显示），英文仍按空格断——常用于中英混排需保护中文语义的场景
常见异常场景 + 对应修复写法
问题1：一段英文 URL 撑破容器，不换行
原因：white-space: normal 下，URL 没空格也不含连字符，浏览器拒绝断开。
立即学习“前端免费学习笔记（深入）”；
✅ 推荐方案：word-break: break-all 或更安全的 overflow-wrap: break-word（优先尝试断词，不行再断字）
问题2：中文标题里两个字被硬生生拆到两行，难看
原因：用了 word-break: break-all，导致每个汉字都可能成为断点。
✅ 推荐方案：改用 word-break: keep-all + white-space: normal，或直接用 overflow-wrap: break-word（它对中文更友好）
问题3：后台返回带换行符的富文本，页面里却显示成一行
原因：white-space 是默认的 normal，会把换行符当空白合并掉。
✅ 推荐方案：white-space: pre-wrap ——既保留换行，又允许内容在边界处正常折行
组合使用建议：别只靠一个属性硬扛
单设 word-break 很难覆盖所有情况。真正稳的写法是搭配使用：
- 通用正文段落：
white-space: normal; overflow-wrap: break-word; - 代码块 / 日志 / ID 字段：
white-space: pre; word-break: break-all;（保留缩进和换行，超长强制断） - 用户昵称 / 标题（中英混排）：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（不换行+省略）或white-space: normal; word-break: keep-all; - 需要完全保留格式的说明文案：
white-space: pre-wrap;（最稳妥，兼容换行+空格+自动折行）
基本上就这些。记住：white-space 定“节奏”，word-break（或 overflow-wrap）管“切口”。调的时候先看内容结构——有没有换行符？有没有长无空格串？是不是中英混排？再选组合，比盲目加 !important 有用得多。
