根本原因是white-space锁死换行开关或容器宽度失效，需先检查white-space是否为normal/pre-wrap，再配max-width和overflow-wrap: break-word，避免与word-break混用。
文字溢出不换行，根本不是“字太多”，而是white-space锁死了换行开关，或容器没形成 BFC 导致宽度计算失效——只加word-break或overflow大概率白配。
white-space 是第一道必须检查的开关
它直接决定浏览器是否允许折行，其他换行属性全在它开启后才生效。常见错误是继承了父级的white-space: nowrap（比如按钮、表格单元格、Flex 项），导致overflow-wrap完全被忽略。
- 确认目标元素 computed styles 中
white-space值是normal或pre-wrap；不是nowrap、pre或pre-line（除非你明确需要） - 若需保留原始空格和换行符，用
white-space: pre-wrap，它既保留格式又允许边界折行 - 绝对不要在响应式卡片或列表项里全局设
white-space: nowrap，除非配合text-overflow: ellipsis做单行截断
overflow-wrap: break-word 必须配 width 或 max-width 才触发
overflow-wrap: break-word不是“永远换行”，而是“当整词放不下当前可用宽度时才断”。如果容器没显式约束宽度（比如 Flex 子项未设max-width，或父容器未触发 BFC），浏览器会认为“还有空间”，根本不走断词逻辑。
- 给文本容器加
max-width: 100%或具体值（如max-width: 300px） - 若容器是 Flex/Grid 子项，额外加
min-width: 0，否则默认min-width: auto会阻止收缩和换行 - 别写
overflow: hidden来“掩盖”溢出——它只是藏起来，不解决换行问题，还可能切掉重要内容
word-break 和 overflow-wrap 别混着乱用
二者行为冲突：比如word-break: break-all会无差别切所有单词，而overflow-wrap: break-word只在必要时保守断词。同时声明时，break-all常会覆盖后者逻辑。
立即学习“前端免费学习笔记（深入）”；
- 中文为主 + 偶有长 URL：用
overflow-wrap: break-word+white-space: normal - 纯技术字段（ID、token、base64）：用
word-break: break-all，但仅限该字段，别污染全局 - 想兼容老 Safari（overflow-wrap: break-word和
word-wrap: break-word（后者是旧名，仍被识别） - 避免写
word-break: keep-all再配overflow-wrap——前者禁止中文断字，后者又试图断词，结果可能是全部溢出
浮动布局下，父容器高度塌陷会让所有换行失效
浮动元素脱离文档流，父容器若没形成 BFC，就“看不见”子元素，导致其宽度计算为 0，文本实际在“虚空”中渲染——这时哪怕overflow-wrap设得再对，也撑不出正确换行位置。
- 给浮动元素的**直接父容器**加
display: flow-root（现代首选）或overflow: hidden（兼容 IE6+，但慎用于弹窗类场景） - 清除浮动本身（如
::after伪元素）不能替代 BFC 触发——它只定位自身，不恢复父容器高度感知 - 别对浮动元素自己设
width: 100%再加word-break：它的 100% 是相对于初始包含块，不是父容器宽度
真正容易被忽略的是：overflow-wrap和word-break的效果，严重依赖父容器是否形成 BFC 以及子项是否受宽度约束。没这两条，属性再全也是摆设。
