word-wrap（overflow-wrap）不生效的根本原因是父容器无宽度或为inline元素；需设块级显示、明确宽度，避免white-space:nowrap，并注意与flex/grid及white-space属性的冲突。
word-wrap: break-word 为什么有时不生效
根本原因通常是父容器没设宽度，或者用了 display: inline 类型的元素（比如 ）。word-wrap（现标准名 overflow-wrap）只对块级或设置了明确宽高的容器起作用。
实操建议：
- 确保目标元素是块级（如
div、p）或显式加了display: block - 父容器必须有可计算的宽度，哪怕只是
width: 100%或max-width: 400px - 避免和
white-space: nowrap同时使用——后者会强制禁用所有换行，直接覆盖word-wrap - 现代写法优先用
overflow-wrap: break-word，word-wrap是旧别名，虽仍支持但语义弱
break-word 和 break-all 的关键区别
break-word 只在单词整体放不下时才折行，且尽量保持单词完整；break-all 则粗暴地在任意字符间切断，不管语义。
典型场景：
- 展示用户输入的长 URL 或邮箱？用
overflow-wrap: break-word——至少保留https://这种前缀可读 - 渲染纯数字 ID（如
12345678901234567890）且容器极窄？word-break: break-all更可靠 - 注意：
word-break: break-all在中文里也会断字，而overflow-wrap: break-word对连续中文基本不触发（因为中文每个字算“单词”）
和 white-space 配合使用的常见翻车点
很多人想“既保留空格缩进，又允许长单词换行”，结果加了 white-space: pre-wrap 就发现 overflow-wrap 失效了——其实不是失效，是 pre-wrap 的换行规则优先级更高。
解决办法：
- 如果只需保留段落内空格、不要求严格保留换行符，改用
white-space: normal+overflow-wrap: break-word - 如果真要
pre-wrap行为，得额外加hyphens: auto（配合lang属性）或 JS 分词逻辑，纯 CSS 没有银弹 - 警惕
white-space: pre-line：它合并空白但保留换行符，此时overflow-wrap仍有效，但长单词可能被挤到下一行开头，视觉上像“没断开”
Flex/Grid 容器里的换行失效问题
在 display: flex 或 display: grid 的子项上直接写 overflow-wrap，大概率没反应。因为 flex item 默认不收缩（min-width: auto），浏览器会优先拉伸容器而非折行。
必须补上这句：
-
min-width: 0（flex item）或min-inline-size: 0（更规范） - Grid item 同理，加
min-width: 0或设overflow: hidden触发 BFC - 别只依赖
flex-shrink: 1——它控制缩放比例，不解决最小宽度锁定问题
最常被忽略的是容器的“隐式最小尺寸”行为，尤其在嵌套 flex 中，一层没设 min-width: 0，整条链路的换行都会卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
