word-break: break-all 无条件断字，无视语义；overflow-wrap: break-word 仅溢出时才断词，优先保全单词；两者叠加时前者生效；均不处理超长非文本元素。
word-break: break-all 会无条件在任意字符间断行
它不关心单词是否完整、有没有空格，只要容器装不下，就从当前字符位置硬切。比如 supercalifragilisticexpialidocious 在窄容器里可能变成 su-per-ca-li-frag-ilis-ticex-pialidoc-i-ous，哪怕语义完全断裂。
适用场景包括：表格固定列宽、代码片段展示、URL纯文本渲染（不带链接交互时）。但要注意：word-break: break-all 对中文、日文、韩文（CJK）也生效——汉字会被逐字切断，除非你额外加 word-break: keep-all 控制。
- 必须配合明确的
width或max-width才能触发，否则无效果 - 和
white-space: nowrap同时用会冲突，后者优先级更高 - Safari 对
break-all的断点选择偶尔比 Chrome 多切一次，视觉上略“碎”
overflow-wrap: break-word 只在溢出时才妥协断词
它的逻辑是：“先尽量保持单词完整，实在放不下了，再找最近的字符位置切一刀”。所以 https://example.com/very-long-path 在 150px 宽度下，大概率切成 https://example.com/very-long- + path，而不是 https://exa-mple.com/ve-ry-lo-ng-pa-th。
这个属性对 CJK 文本没特殊处理，中文照样按字换行（因为中文本来就没空格），但它不会像 break-all 那样“主动出击”，只响应溢出事件。
将 LaTeX（.tex）学术论文转换为 Word（.docx），支持可编辑的 OMML 公式、原生 Word 表格、嵌入图形、IEEE 双栏排版及参考文献
- 旧写法
word-wrap: break-word仍被所有浏览器支持，但新项目建议用overflow-wrap - IE11 只认
word-wrap，如果还要兼容它，得双写 - 当父容器有
display: flex且子项未设flex-shrink: 1时，overflow-wrap可能完全不触发
两者叠加时，word-break 优先级更高
如果你同时写了 word-break: break-all 和 overflow-wrap: break-word，浏览器会忽略后者——word-break 是更底层的断词控制，它决定了“能不能断”，而 overflow-wrap 决定的是“要不要断”。前者已开闸，后者就无权干预了。
常见误用是以为加了 break-word 就能“温柔断词”，结果忘了某个祖先元素设置了 break-all，导致整块文字全乱切。
- 检查 computed styles 时，优先看
word-break值是否被继承覆盖 -
keep-all和break-word搭配使用是安全的，前者锁住 CJK，后者兜底英文长串 - 移动端 WebView（尤其 Android 4.x）对两者的解析差异较大，务必真机测试
anywhere 值比 break-word 更现代但兼容性差
CSS Text Level 4 新增了 overflow-wrap: anywhere，它允许在任意位置断行，但会优先选连字符、标点后等“语义友好位点”。相比 break-all 更智能，相比 break-word 更激进。
不过截至 2026 年中，anywhere 在 Safari 和部分旧版 Android 浏览器里还不支持，生产环境慎用。
- Chrome / Firefox / Edge 115+ 已稳定支持
- 不能和
white-space: pre共存，会退化为normal - 若需 fallback，可写成：
overflow-wrap: break-word; overflow-wrap: anywhere;（后声明者生效）
max-width: 100% 或 object-fit 配合处理。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
