word-wrap/overflow-wrap 失效主因是父容器未设 width 或 flex 子项缺 min-width: 0；break-word 不断词优先，anywhere 可断中文但影响阅读；ie 需双写，且 white-space: nowrap 会覆盖换行。
word-wrap 属性失效？先检查父容器有没有设置 width
很多情况下 word-wrap（现推荐用 overflow-wrap）看起来没起作用，根本原因是盒子本身没宽度约束，文字直接撑开容器，自然不会换行。浏览器默认对 inline 元素或未设宽的块元素不做换行干预。
-
word-wrap: break-word只在内容超出当前行可用宽度时才触发换行 - 必须配合
width、max-width或弹性布局下的有效收缩行为（如flex: 0 1 auto） - 如果父容器是
display: flex且子项没设min-width: 0，文字长单词仍可能溢出——这是 flex 默认行为，不是word-wrap失效
break-word 和 anywhere 的区别：断词策略不同
word-wrap: break-word 是“尽量不断词，实在放不下才在任意位置切”，而 overflow-wrap: anywhere 更激进：只要能避免溢出，就允许在任意字符间断行（包括中文汉字之间）。这对纯中文或中英混排场景影响明显。
-
break-word对中文效果有限——中文没有空格分隔，它通常等同于不换行，除非遇到超长无空格英文串 -
anywhere能让连续中文字符也换行，但可能把“搜索引擎优化”切成“搜索引|擎优|化”，阅读体验打折扣 - 若要兼顾可读性，建议优先用
word-break: keep-all+overflow-wrap: break-word组合
IE 兼容问题：word-wrap 还是 overflow-wrap？
IE8–IE11 只认 word-wrap，而现代标准是 overflow-wrap。二者值完全一致，但写法不同。
- 必须同时写两遍才能覆盖全：先写
overflow-wrap: break-word，再写word-wrap: break-word（后者会被现代浏览器忽略，但 IE 会读） - 不能只写
word-wrap并指望它在新浏览器里“自动升级”——CSS 不会做这种映射 - 注意：
overflow-wrap: anywhere在 IE 中完全不支持，需降级到break-word
和 white-space 冲突？别让 nowrap 覆盖换行逻辑
如果同时设置了 white-space: nowrap，那 word-wrap 和 overflow-wrap 都无效——因为 nowrap 明确禁止换行，优先级更高。
- 常见误配：
white-space: nowrap+overflow-wrap: break-word→ 后者被无视 - 想保留单行截断+省略号，应该用
white-space: nowrap+text-overflow: ellipsis+overflow: hidden，而不是指望换行 - 真要换行，
white-space必须是normal、pre-wrap或break-spaces等允许折行的值
min-width 默认值，以及 white-space 和 overflow-wrap 的隐式互斥关系。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
