优先用 overflow-wrap: break-word，它只在单词超长时断行，保持语义完整；需配合 width/max-width 才生效，而 word-break: break-all 会无差别切分字符，影响可读性。
长单词不换行导致容器溢出怎么办
直接用 word-break: break-all 最快见效，但会把任意位置（包括英文单词中间）硬切开，影响可读性。真正需要的是“在不可分割的长串（如 URL、base64、哈希值）里安全断行”，而不是无差别切词。
常见错误是只加 white-space: nowrap 或忘了配 overflow-wrap: break-word，结果在 Safari 或旧版 Chrome 里依然溢出。
-
word-break: break-all：强制在任意字符间断行，适合纯技术字符串（如sha256:abcdef1234567890...），但别用在普通段落里 -
overflow-wrap: break-word（旧名word-wrap: break-word）：只在单词超长且无空格时才断，优先保持完整单词，更符合阅读习惯 - 必须配合
width或max-width才生效，否则浏览器没“换行依据”
break-all 和 break-word 的行为差异在哪
看这两个 CSS 声明的实际效果：
.break-all {
word-break: break-all;
width: 120px;
}
.break-word {
overflow-wrap: break-word;
width: 120px;
}
对内容 verylongfilename_without_underscore.txt：
-
break-all可能切成verylo+ngfilen+ame_wi… 完全不管语义 -
break-word会尽量保留verylongfilename_without_underscore.txt整体，只在超出容器时从末尾找断点（比如在.前或下划线处） - 若内容是
https://example.com/very/long/path/with/no/spaces，break-word通常会在/后断，break-all则可能切在th和is中间
为什么加了 break-all 还是不换行
大概率是漏了三个关键前提：
- 父容器没设
width或max-width—— 浏览器默认按内容撑开，根本没“换行触发条件” - 元素是
inline级（如span），而word-break对 inline 元素默认无效，需加display: inline-block或block - 用了
white-space: nowrap覆盖了换行行为，它优先级高于word-break
调试时直接检查 computed styles，确认 word-break 和 overflow-wrap 是否被覆盖或未生效。
现代项目该优先用哪个属性
除非明确要求“绝对不溢出”，否则优先用 overflow-wrap: break-word，再叠加 word-break: break-word（注意：这个值和 break-all 不同，是规范新增的语义化选项，支持在连字符、斜杠等自然断点处换行）。
兼容性上：overflow-wrap 在所有现代浏览器中稳定，IE11 需用 word-wrap 回退；word-break: break-word 在 Chrome 91+、Firefox 90+、Safari 15.4+ 支持，老版本 fallback 到 break-all 即可。
最稳妥组合：
.text {
overflow-wrap: break-word;
word-wrap: break-word; /* IE */
word-break: break-word; /* 新标准，优先用 */
word-break: break-all; /* fallback for older browsers */
}
真正容易被忽略的是：URL 或 token 类内容常带 -、_、/，这些字符本身已是天然断点，break-word 比 break-all 更懂它们。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
