overflow-wrap 不生效的主因是容器未设宽度限制；需配合 width/max-width、清除浮动、避免 white-space: nowrap 冲突，并兼容书写 word-wrap。
overflow-wrap 不生效？检查是否设置了 width 或 max-width
很多情况下 overflow-wrap: break-word 看似没用，其实是容器本身没限制宽度——浏览器默认让长单词撑开父容器，根本没机会“换行”。必须确保父元素有明确的宽度约束，比如 width: 300px 或 max-width: 100%。在 flex 或 Grid 容器里尤其容易忽略这点，子项可能默认不收缩。
-
overflow-wrap只在内容“超出当前行可用空间”时触发，没空间限制就无从谈起 - 用
devtools检查计算后的width值，别只看 css 规则里写了没写 - 响应式场景下，
max-width: 100%比固定width更安全，避免小屏溢出
Float 元素内部的长单词：clear 和 overflow 都得动
浮动元素（float: left）自身若含长单词，仅靠 overflow-wrap 不够。因为浮动会脱离文档流，其父容器高度塌陷，导致后续内容上浮、布局错乱，此时即使单词断开了，视觉上仍可能溢出或重叠。
- 给浮动元素加
overflow: hidden或overflow: auto（触发 BFC），强制它包裹内容并撑开高度 - 如果父容器也浮动了，记得加
clear: both或用伪元素清除浮动，否则max-width可能失效 - 不要依赖
word-break: break-all暴力截断，它会在任意位置断开英文单词，可读性差
兼容性陷阱：overflow-wrap vs word-wrap
overflow-wrap 是标准属性，但 IE 和旧版 edge 只认 word-wrap。两者值相同（break-word），但写法必须共存才能覆盖老浏览器。
- 必须同时写：
word-wrap: break-word; overflow-wrap: break-word; - CSS 预处理器或 postcss 会自动补全，但手写或调试时容易漏掉
word-wrap -
overflow-wrap: anywhere在 chrome 82+ 支持，但 safari 目前不支持，别在线上环境单独依赖它
和 white-space 冲突？优先级顺序很关键
如果同时设了 white-space: nowrap，那 overflow-wrap 直接被无视——因为 nowrap 明确禁止换行，断字规则压根不执行。
立即学习“前端免费学习笔记（深入）”；
- 检查是否意外继承了
white-space，比如从按钮、表格单元格或 ui 组件库样式中带过来的 - 需要保留部分空白折叠但允许断词？用
white-space: normal（默认值） +overflow-wrap: break-word -
pre-wrap会保留换行和空格，但也允许断词，适合日志、代码片段等混合场景
真正麻烦的是嵌套浮动 + 弹性布局 + 动态内容宽度的组合，这时候光靠一个 overflow-wrap 解决不了问题，得一层层看渲染树里谁没设宽、谁没清浮、谁锁死了 white-space。动手前先打开 devtools 的 layout 面板，盯着 computed 样式看三秒，比瞎试五种写法更快。