overflow-wrap: break-word 不生效主因是仅作用于不可分割长单词，对含空格或中文文本无效；需检查是否被 white-space: nowrap 覆盖、容器宽度缺失或 flex-shrink 为0，中文场景应改用 word-break: break-all。
overflow-wrap: break-word 不生效的常见原因
直接写 overflow-wrap: break-word 却看不到换行，大概率不是语法错，而是它只对「无法被自然断开的长单词或连续字符」起作用——比如一串无空格的英文、Base64字符串、超长 URL。如果文本里有空格或中文，浏览器默认就会在空格/字间换行，overflow-wrap 基本不触发。
实操建议：
- 先确认溢出内容是否真属于「不可分割单元」：用开发者工具选中文字，看 computed styles 里
word-break和overflow-wrap是否被其他规则覆盖（比如父级设了white-space: nowrap） - 中文场景下，
overflow-wrap几乎无效，得靠word-break: break-all或break-word（注意：CSS 中break-word是overflow-wrap的取值，不是word-break的） - 若容器本身没设
width或max-width，且是 flex/grid 子项，可能因主轴伸缩导致“看起来没溢出”，需检查flex-shrink是否为 0
word-break vs overflow-wrap 的行为差异
这两个属性常被混用，但语义和触发条件完全不同：
-
word-break: break-all：强制在任意两个字符间断行，中文、英文、数字全砍，适合日志、token 等纯展示场景，但可读性差 -
word-break: keep-all：中文不断、英文按单词断（类似默认行为），适合双语混合正文 -
overflow-wrap: break-word：仅当整词放不下时，才把该词折到下一行——它不会拆中文单字，也不会拆英文单词中间（除非加hyphens: auto） -
overflow-wrap: anywhere：比break-word更激进，允许在任意字符后断（包括中文），且不依赖容器宽度是否足够，兼容性略差（IE 不支持）
配合 white-space 和 text-overflow 实现完整截断逻辑
单靠 overflow-wrap 无法解决「既想换行又想单行省略」这类矛盾需求。真实项目中往往要组合控制：
- 多行省略 + 换行：用
display: -webkit-box+-webkit-line-clamp，此时overflow-wrap无效，得确保内容本身可断（如加零宽空格到长 token 里） - 单行强制换行 + 末尾省略：不可能同时成立；要么放弃省略（
text-overflow: clip），要么放弃换行（white-space: nowrap） - 安全兜底：给容器加
min-width: 0（尤其在 flex 容器中），防止 Chrome 下因计算宽度异常导致overflow-wrap被忽略
Firefox 和 Safari 下的兼容细节
overflow-wrap 在所有现代浏览器都支持，但表现仍有微妙差别：
- Firefox 对
break-word的判定更保守：遇到含连字符的单词（如user-id-12345），可能优先在连字符处断，而非整个折行 - Safari（≤16.6）在
position: absolute容器中，若未显式设width，overflow-wrap可能完全失效 - 所有浏览器对
pre元素内的文本默认忽略overflow-wrap，必须额外加white-space: pre-wrap
真正难处理的是嵌套 inline 元素（比如 span 包着一串无空格 hex 字符），这时最稳的解法不是调 CSS，而是在数据层插入 或用 JS 按长度切分后加 软连字符——样式只是最后一道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
