word-break 和 overflow-wrap 是两个独立且不可替代的 CSS 换行控制属性：前者决定“在哪断”（如 break-all 强制任意位置断），后者决定“要不要断”（如 break-word 仅在必要时破词）。
word-break 和 word-wrap（现为 overflow-wrap）是两个独立控制换行的 CSS 属性
它们解决的问题不同，不能互相替代。很多人误以为 word-wrap: break-word 就能处理所有长单词断行，结果在中文、日文或超长 URL 场景下依然溢出容器。
word-break 控制“在哪断”：针对单词内部的断点规则
它决定浏览器是否允许在单词中间强制断行，尤其影响非空格分隔的连续字符串（如 verylongenglishword、日本語の長い単語 或 Base64 字符串）。
-
word-break: normal：按语言默认规则断行（英文只在空格/连字符处，中日韩按字断） -
word-break: break-all：**无视语义，任何位置都可断**，适合纯展示场景（如日志、代码片段），但会把英文单词从中间硬切（ex…ample） -
word-break: keep-all：**禁止在单词内断行**，中文/日文正常按字断，但英文长词会溢出——常用于多语言混排时保护英文术语完整性
div {
width: 120px;
border: 1px solid #ccc;
word-break: break-all;
}
/* 输入 "supercalifragilisticexpialidocious" → 可能在任意字母后换行 */word-wrap / overflow-wrap 控制“要不要断”：是否允许长内容溢出容器
这个属性本质是兜底开关：当内容长度超过容器宽度，且常规断行（空格、标点）失败时，是否启用“破坏性断行”来防止溢出。注意：CSS3 已将 word-wrap 重命名为 overflow-wrap，两者等价，但后者是标准写法。
-
overflow-wrap: normal：不主动破词，超长无空格字符串直接溢出 -
overflow-wrap: break-word：**仅在必要时才破词**（即内容撑不开容器 + 无自然断点），且优先尝试在单词边界（如连字符）处断；对中文/日文效果有限，因它们本就按字断
p {
width: 150px;
overflow-wrap: break-word;
}
/* 输入 "thisisaverylongurlwithoutanybreakpoints.com" → 会在 . 前后断开 */实际项目中该选哪个？关键看内容类型和设计容忍度
多数 Web 应用需组合使用，而非二选一：
立即学习“前端免费学习笔记（深入）”；
- 用户生成内容（含 URL、邮箱、代码）：
overflow-wrap: break-word+word-break: break-all（激进保布局） - 多语言混合正文（如中英技术文档）：
overflow-wrap: break-word+word-break: keep-all（保英文词形，靠中文天然断字） - 表格单元格或卡片标题（严格防溢出）：
overflow-wrap: anywhere（CSS Level 4 新值，比break-word更激进，允许在任意字符间断，包括空格前） - 注意 Safari 对
overflow-wrap: anywhere支持较晚（v15.4+），生产环境需检查兼容性
最容易被忽略的是：设置 white-space: nowrap 会直接禁用所有换行逻辑，此时 word-break 和 overflow-wrap 全部失效。
