overflow-wrap: break-word仅在必要时断词，优先保持单词完整，于URL斜杠或点号后等语义位置断行；word-break: break-all则无条件强制断字，两者共存时后者生效。
overflow-wrap: break-word 只在必要时断词
它不主动干预换行，而是等常规换行失败（比如整段文字没空格、又超宽）才出手。浏览器会先尝试把整个单词挪到下一行；实在塞不下，才在单词里找位置切开——而且优先选语义合理的点，比如 URL 中的 / 或 . 后面。
常见错误现象：overflow-wrap: break-word 对纯中文没效果，因为中文本来就能在任意字间断行；对英文段落也“看不见”，除非真有超长无空格字符串（如 https://example.com/very/long/path）。
- 适用场景：长 URL、技术术语、代码片段等“偶尔溢出”的内容
- 必须配合固定宽度（如
width或max-width），否则无触发条件 - 现代写法推荐用
overflow-wrap: break-word，同时加word-wrap: break-word兼容旧 IE
word-break: break-all 一到边就砍
它不管语义、不管有没有空格，只要文本走到容器右边界，立刻在当前字符后硬切。英文单词、数字串、Base64 都照砍不误，supercalifragilistic 可能变成 superca-lifragil-istic。
容易踩的坑：word-break: break-all 在移动端表格里用多了，iOS Safari 渲染重排开销明显上升；另外，它对 CJK 文本影响小（本来就能断），但对英文破坏性大，可读性下降。
- 适用场景：窄列数据表格、日志面板、密钥展示等“宁可难读也不能溢出”的场合
-
word-break: keep-all常被忽略——它能让中文/日文保持整词不拆，但英文仍按空格断，适合多语言混合标题 - 别和
white-space: nowrap混用，否则break-all失效
两者混用时谁赢？
如果同时设了 overflow-wrap: break-word 和 word-break: break-all，后者胜出。因为 word-break 是更底层的断词规则，它直接改写了浏览器的断行机会判断逻辑，overflow-wrap 的“仅在必要时”条件根本不会被评估。
真实调试中，用 DevTools 检查 computed 样式时，你会发现 word-break 的值会覆盖掉 overflow-wrap 的行为，哪怕你只写了 break-all 而没动其他属性。
- 想保留单词完整性？只用
overflow-wrap: break-word，删掉所有word-break - 要绝对防溢出？只用
word-break: break-all，overflow-wrap可以去掉 - keep-all + overflow-wrap 组合在韩文排版里很关键，但中文下基本等价于只用
white-space: normal
anywhere 是新变量，但别乱用
CSS Text Level 4 新增的 overflow-wrap: anywhere 行为介于两者之间：比 break-word 激进，比 break-all 温和。它允许在任意字符间断，但依然尊重空格优先原则——不过目前 Safari 对它的支持还不稳定，Chrome 120+ 才开始可靠支持。
真正要注意的是：这个值一旦生效，会绕过 word-break 的控制，属于独立断行策略。线上项目里，除非明确需要跨浏览器一致的“软强制断行”，否则暂时跳过它更稳妥。
最常被忽略的其实是 white-space 的前置影响——如果设了 white-space: nowrap，那 overflow-wrap 和 word-break 都不会起作用。换行控制是链式判断，不是孤立开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
