word-break控制“在哪断”，无条件强制断行；overflow-wrap控制“要不要断”，仅在溢出时被动兜底换行。前者优先级更高，两者共存时后者失效。
word-break 和 overflow-wrap（原 word-wrap）根本不是同一类控制逻辑：前者是“主动强制断行”，后者是“被动兜底换行”。选错会导致中文被切碎、URL可读性归零，或长单词直接溢出容器。
word-break: break-all 会无条件打断所有字符
只要文本撑到容器右边界，word-break: break-all 就立刻在任意两个字符之间插入换行——不管是不是英文单词中间、Base64字符串里、还是中文两个字之间。
- 典型错误现象：
https://example.com/verylongpath变成https:/ /example .com/ve rylongp ath，语义断裂，复制粘贴失效 - 适用场景：窄表格列（如日志 ID 列）、纯展示型数据面板，且内容本身无需人工阅读
- 注意
keep-all对 CJK 文本禁用换行，但若容器太窄，会直接溢出而非滚动——它不解决宽度问题，只改变断行策略 - 移动端慎用：
break-all在 iOS Safari 上每百个元素增加约 8ms 渲染耗时
overflow-wrap: break-word 只在必要时才切单词
overflow-wrap: break-word（推荐写法，word-wrap 是别名）会先尝试常规换行（空格、连字符），仅当整个单词长度 > 容器宽度且无法整体放入时，才在单词内找位置切开。
- 典型效果：
Supercalifragilisticexpialidocious在 200px 宽度下保持完整；缩到 100px 才从Supercali...或...docious类似位置断开 - 对 URL 更友好：优先在
/、.、-后断行，而非随机切字母 - 不作用于中文段落本身——CJK 字符默认就按字断行，
overflow-wrap对它们基本无感 - IE 旧版本必须用
word-wrap: break-word，现代项目应统一用overflow-wrap
white-space 和 line-break 会影响它们的实际表现
word-break 和 overflow-wrap 不是孤立生效的。如果父元素设置了 white-space: nowrap，那两者都失效——文本压根不会换行。
-
line-break: strict会让中文/日文更激进地断行（比如在标点后），可能和word-break: keep-all冲突 -
text-overflow: ellipsis需要配合white-space: nowrap+overflow: hidden，此时overflow-wrap完全不起作用 - 混合排版（中英混排）建议优先测试
overflow-wrap: break-word+word-break: normal组合，比盲目上break-all更稳妥
真正容易被忽略的是：这两个属性都不解决「容器本身没设宽」的问题。如果父容器是 display: flex 且未限制 max-width，再怎么配 overflow-wrap，文本照样撑开布局。换行控制永远是「容器约束 + 文本策略」的共同结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
