overflow-wrap: break-word 不生效主因是父容器缺宽度限制或被 white-space: nowrap 等样式覆盖；需配合 width/max-width、避免 word-break: keep-all，并推荐组合使用 overflow-wrap: break-word 与 word-break: break-word（兼容旧版）及 hyphens: auto。
overflow-wrap: break-word 不生效的常见原因
这个声明本身没问题，但实际不换行往往是因为父容器没设宽度限制，或者被其他 CSS 覆盖了。浏览器默认只对空格、连字符等断点换行，overflow-wrap: break-word 是告诉它“实在不行就硬切英文单词”，但前提是容器有明确的 width 或 max-width，否则它认为“还有空间”，根本不会触发断行逻辑。
- 父元素没设
width/max-width（比如div默认 100% 宽，但若内部是 flex 或绝对定位，可能实际不受控） - 存在更优先的
white-space: nowrap或pre类样式，直接禁用了所有换行行为 - 用了
word-break: keep-all，它会压制overflow-wrap的效果 - 在 Firefox 中，若父容器是
display: inline-block且未设宽，也可能不触发
真正起效的最小 CSS 组合
单独写 overflow-wrap: break-word 很容易失效。必须搭配容器约束和基础换行许可，推荐用这组：
div {
width: 300px;
overflow-wrap: break-word;
word-break: break-word; /* 兼容旧版 Safari 和部分 Android Webview */
hyphens: auto; /* 可选，对支持的浏览器加连字符，更自然 */
}注意：word-break: break-word 不是标准值（已废弃），但 Safari 15.4 之前必须靠它兜底；现代写法应改用 word-break: normal + overflow-wrap: break-word，但实测中加一行 break-word 仍是最稳的兼容方案。
和 word-break: break-all 的关键区别
两者都“能断英文”，但策略完全不同：word-break: break-all 是无差别切——哪怕单词中间有连字符、数字后跟字母，它也照切；而 overflow-wrap: break-word 只在“整词放不下”时才切，优先保语义完整。
立即学习“前端免费学习笔记（深入）”；
-
overflow-wrap: break-word：适合正文、标题、用户输入内容，尊重语言习惯 -
word-break: break-all：适合日志 ID、哈希值、base64 字符串这类纯标识符场景 - 混用风险：同时设两者，Chrome 会以
word-break为准，Firefox 则可能表现不一致
React/Vue 中动态内容的额外注意点
框架里渲染的文本如果带空格或换行符，可能被 HTML 压缩掉；如果来自 API 的长 token 没包在 <span> 或 <div> 里，而是直接插在 <p> 中，某些 SSR 场景下样式继承会出问题。
- 确保目标元素有明确 class，不要依赖内联 style（易被框架重置）
- 服务端渲染时，检查是否启用了 HTML 压缩（如
express-static的minify），它可能删掉空格导致断行失效 - 用
console.log(getComputedStyle(el).overflowWrap)真实验证是否生效，别只看 CSS 文件写了没
实际项目里最常漏的是给父容器设 max-width，而不是 width；响应式布局中用 width: 100% 反而容易失效，因为 100% 是相对父容器，而父容器可能没边界。
