overflow-wrap: break-word没生效主因是父容器缺宽度约束或被white-space: nowrap等覆盖；需设width/max-width、display:block、避免nowrap，并在flex中加min-width:0。
加了 overflow-wrap: break-word 还不换行，八成不是属性写错了，而是父容器没给约束、子元素没设好显示行为，或者被 white-space: nowrap 无声覆盖了。
为什么 overflow-wrap: break-word 没生效
这个属性只在“单词整体放不下容器”时才触发断行，它不会主动压缩内容。常见失效原因：
-
max-width或width缺失——浏览器默认按内容撑开，根本没有“放不下”的判断依据 - 元素是
inline级（比如span），而overflow-wrap对纯 inline 元素无效，需加display: inline-block或block - 父级或自身设置了
white-space: nowrap，它的优先级高于overflow-wrap，直接禁用所有换行 - 用了
flex布局但没给子元素设white-space: normal，flex 子项默认nowrap
hyphens: auto 在 Safari 和中文场景下的真实表现
hyphens: auto 名义上是“自动加连字符”，但实际效果因语言和浏览器差异极大：
- 对英文有效（如
supercalifragilistic→super- cali-fragilistic），前提是系统有对应语言字典且启用 - 对中文、日文、韩文基本无效——CJK 文本没有连字符概念，Safari 也不会因此触发断行
- iOS Safari（15.4 之前）在
contenteditable或textarea中可能忽略hyphens，此时得靠-webkit-hyphens: auto+word-break: break-all组合兜底 - Chrome 和 Firefox 支持更稳，但依然要求显式声明
lang="en"属性才能激活英文连字符逻辑
什么时候该用 overflow-wrap: anywhere 而不是 break-word
anywhere 是更激进的断行策略，它允许在任意字符前换行（包括空格前），适合对可读性容忍度高、但对布局稳定性要求极高的场景：
- 表格中固定宽度的 API 路径列，如
/v1/users/search?filter=active&sort=name，break-word可能卡在=后不换，anywhere会立刻在?或&前切开 - 移动端卡片标题含长文件名（
verylongfilename_without_underscore.txt），break-word会尽量保全整个字符串，anywhere则优先保证不溢出 - 注意：Chrome 82+ 才稳定支持，iOS Safari 直到 16.4 才完全兼容，老版本需降级为
break-word
真正容易被忽略的渲染前提
就算属性全写对了，如果父容器是 display: inline 或没设 vertical-align，换行后的内容可能视觉上“消失”——因为行盒高度没撑开，或者被其他 inline 元素遮挡。务必确认：
- 目标元素有明确的
display行为（block、inline-block、flex等） - 父容器未设置
line-height: 0或font-size: 0类似清空文本高度的操作 - 调试时直接看 computed styles，别只信你写的 CSS 规则——
overflow-wrap被inherit或initial覆盖很常见
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
