推荐使用 overflow-wrap: break-word + word-break: keep-all 组合：前者在必要时才折行，保留单词完整性；后者禁止中文内断行，避免语义割裂，兼顾中英混排可读性与布局安全。
word-break: break-all 会强制截断单词，但可能破坏可读性
word-break: break-all 的行为是“见缝就断”，哪怕单词中间没有连字符或空格，也会在任意字符位置换行。比如 "supercalifragilisticexpialidocious" 可能被切成 "superca- 和 "lifragilis- 这种毫无语义的片段。
- 仅适合纯技术场景（如日志 ID、哈希值、base64 字符串）
- 在中文混合英文的界面中，它会对英文单词过度切分，反而比不换行更难读
- 它不关心词边界，
word-break: break-word并不存在（这是常见误解，CSS 中没有该值）
实际建议：除非你明确需要“不惜一切代价填满行宽”，否则慎用 break-all。
overflow-wrap: break-word 更安全，只在必要时才换行
overflow-wrap: break-word（旧名 word-wrap: break-word）的逻辑是：先尝试按空格/标点自然断行；只有当单个不可分割内容（如超长 URL 或无空格字符串）撑爆容器时，才在字符间强行折行。
- 它尊重单词完整性，优先保留
"example.com/path/to/resource"这类字符串的整体性 - 遇到
@#@#@#@#@#@#@#@#@#@0...时，会在/或.后换行（如果可用），而不是随便切字母 - 注意：它必须配合
width或max-width才生效，否则容器无限宽，没机会触发“溢出”
示例：
.text {
width: 200px;
overflow-wrap: break-word;
}
和 white-space 搭配使用时，行为会彻底改变
white-space 控制空白符处理方式，它和 overflow-wrap、word-break 是正交但互斥的。常见陷阱：
-
white-space: nowrap会直接禁用所有换行能力，哪怕写了overflow-wrap: break-word也无效 -
white-space: pre-wrap保留换行符和空格，同时允许自动换行 —— 此时overflow-wrap才真正起作用 -
white-space: normal（默认）是大多数场景的起点，此时overflow-wrap和word-break才有发挥空间
调试时如果换行不生效，先检查 white-space 是否被意外覆盖。
现代推荐组合：overflow-wrap: break-word + word-break: keep-all
针对中英混排、用户生成内容（如评论、标题）等真实场景，这个组合最平衡：
-
overflow-wrap: break-word处理极端长串（如 URL、代码片段） -
word-break: keep-all禁止中文内断行（避免把“你好世界”拆成“你好”+“世界”跨两行），同时对英文单词保持默认断行逻辑
注意：word-break: keep-all 在 Chrome/Firefox 中对中文有效，但在 Safari 15.4 之前有兼容问题；若需支持老 Safari，可加 overflow-wrap: anywhere 作为后备（它比 break-word 更激进，但比 break-all 尊重断点）。
真正难处理的不是“怎么让长单词换行”，而是“怎么让换行既不割裂语义，又不撑破布局”。多一个 max-width，少一个 white-space: nowrap，往往比调两个 CSS 属性更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
