overflow-wrap: break-word是首选方案，它先尝试在空格、标点、cjk字边界自然换行，仅在必要时才断开长单词，语义更安全；必须配合width或max-width才生效，常与word-break: keep-all搭配用于中英混排。
overflow-wrap: break-word 是首选方案
它不是“强制断行”，而是“兜底换行”：先尝试在空格、标点、CJK字边界处自然换行；实在放不下时，才在长单词内部断开。语义更安全，适合 URL、API 路径、哈希值这类内容。
必须配合有宽度限制的容器才生效，比如 max-width: 300px 或 width: 200px；否则浏览器没换行动机，写了也白写。
它本身不决定“在哪断”，只开放断行权限；真正控制断点位置的是 word-break 或浏览器默认策略。所以常和 word-break: keep-all 配合使用，尤其在中英混排场景下：
- 中文段落里夹着英文长串（如“测试test123456789”），单用
overflow-wrap: break-word可能无效 -
word-break: keep-all能阻止中文被劈开，同时让英文按需断（注意：对纯英文无效） - iOS 12 以下对
keep-all支持弱，可加-webkit-word-break: keep-all兜底
word-break: break-all 在 flex/grid 中常失效
它确实能无差别切割任意字符，但有两个硬性前提：父容器必须是块级元素 + 有明确宽度。在 display: flex 或 display: grid 容器里，子项默认带 min-width: auto，会锁死压缩行为——写了 word-break: break-all 也白搭。
常见错误现象：div 里放了超长 URL，写了 word-break: break-all 却没效果 → 检查是否套在 flex 容器里，再看子项有没有被 min-width 锁死。
修复方法：
- 给子项加
min-width: 0或overflow: hidden，松开这个限制 - 避免用于
table-cell，Safari 旧版本支持不一致 -
word-break: break-word已废弃，写上去等于没写，别从老项目复制粘贴
overflow-wrap: anywhere 的真实作用被低估
它和 break-word 表面效果类似，但底层逻辑不同：当容器宽度设为 min-content 时，anywhere 会让元素的最小内容宽度缩到单个字符宽，而 break-word 仍按最长单词算宽度。这意味着在弹性布局或自动收缩容器中，anywhere 更容易“挤进去”。
适用场景：
- flex 子项需要自适应收缩（比如卡片标题含长 URL）
- grid 中某列宽度由内容决定，但又不能被长单词撑爆
- 不需要连字符（
hyphens）支持，且能接受更激进的断点
white-space 和其他属性要协同使用
如果容器内还有代码片段（如 const myVariableName = 123），建议额外加 white-space: pre-wrap，既能保留缩进和换行，又允许长单词在必要时断行。
white-space: nowrap 会彻底禁用换行，哪怕写了 overflow-wrap 也没用；text-overflow: ellipsis 则只对单行生效，且必须搭配 overflow: hidden 和 white-space: nowrap。
容易被忽略的一点：CSS Text Level 4 引入的 overflow-wrap: anywhere 和 word-break: break-all 不互斥，但和 hyphens: auto 互斥——两者不能共存，浏览器会忽略后者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
