overflow-wrap: break-word是绝大多数场景的正确解法，它仅在内容撑破容器时才断词，优先按/、.、空格等自然断点换行；必须配合width或max-width生效，否则浏览器无法检测溢出，且需避免white-space: nowrap、min-width: auto（flex/grid子项）等干扰。
直接结论：overflow-wrap: break-word 是绝大多数场景的正确解法，word-break: break-all 仅在明确需要“劈开任意字符”时才用，且极易因布局限制失效；word-break: break-word 已废弃，写了等于没写。
为什么 overflow-wrap: break-word 必须配宽度才生效
浏览器不会主动“猜”你希望在哪换行——它只在检测到内容撑破容器时才触发兜底逻辑。没有 width、max-width 或弹性约束（如 flex-basis），容器默认无限宽，根本没机会溢出。
- 常见错误：给
<p></p>直接加overflow-wrap: break-word，但父容器是display: block且没设宽度 → 毫无效果 - 修复方式：确保目标元素有明确宽度限制，例如
max-width: 300px或在 flex 容器中设flex: 1 - 注意：
overflow-wrap本身不决定“在哪断”，只是开放断行权限；真正控制断点的是浏览器默认策略或word-break值
word-break: break-all 在 Flex/Grid 里不生效？先查 min-width
Flex 和 Grid 子项默认带 min-width: auto，这会锁死内容压缩行为，哪怕写了 word-break: break-all，长单词照样撑开容器。
- 典型现象：URL 在
display: flex的卡片里溢出，检查 computed styles 会发现子元素的min-width是auto - 修复方法：给文本所在元素加
min-width: 0（不是父容器）或overflow: hidden - 别用
white-space: nowrap同时存在——它会彻底禁用所有换行能力，包括break-all
中英混排时单用 overflow-wrap: break-word 为什么压不住英文长串
中文本身按字换行，浏览器认为“有地方可断”，就不会触发 overflow-wrap 的兜底逻辑。结果就是“测试test123456789”里中文正常断，英文整串溢出。
- 解决方案：组合使用
overflow-wrap: break-word+word-break: keep-all -
word-break: keep-all阻止中文被切开，同时让英文部分回归 normal 规则（即只在空格/标点处断），此时overflow-wrap才有机会介入长英文串 - 移动端兼容：iOS 12 以下不支持
word-break: keep-all，需补-webkit-word-break: keep-all - 别在纯中文段落里滥用
keep-all——它会让整段中文变成一行，反而导致溢出
overflow-wrap: anywhere 和 break-word 到底差在哪
两者在固定宽容器里表现几乎一致，差异只在容器宽度为 min-content（比如 flex 子项自动收缩、按钮文字自适应）时才暴露。
-
overflow-wrap: anywhere会让最小内容宽度缩到单个字符宽，更适合极窄空间下的兜底 -
overflow-wrap: break-word仍按最长单词算最小宽度，更保守，不易意外压缩 - 注意：Firefox 当前不支持
anywhere，Safari 15.4+ 才开始支持，生产环境用前务必查 caniuse - 它会影响
min-content计算，如果用在fit-content或inline-size: min-content场景，结果可能出人意料
真正容易被忽略的是：所有这些属性都依赖容器有明确宽度限制，且和 white-space 互斥——一旦父级设了 white-space: nowrap 或 pre，换行规则就彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
