overflow-wrap: break-word 是首选，仅在单词过长时断行；需兼容旧版ie加word-wrap: break-word；避免anywhere和break-all误用于英文正文；flex/grid中须设min-width: 0和overflow: hidden。
overflow-wrap: break-word 是多数场景的首选
它只在容器放不下整个单词时才切开单词，既防溢出又保可读性。比如 supercalifragilisticexpialidocious 或长 URL https://example.com/very-long-path-with-no-spaces，默认会撑破容器，加这句就自动断在合适位置。
注意兼容写法：老版 IE/Edge 需补 word-wrap: break-word，现代浏览器认 overflow-wrap: break-word。两者效果一致，建议双写：
.text {
overflow-wrap: break-word;
word-wrap: break-word;
}
别用 overflow-wrap: anywhere——它太激进，连 hello 都可能被切成 hel-lo，仅适合排版自由度极高的场景（如代码编辑器内联提示）。
word-break: break-all 适合中日韩或代码类文本
它无视语义，在任意字符间切断，对中文、日文、韩文（CJK）天然友好，因为这些语言本就不依赖空格分词；也适合 <pre class="brush:php;toolbar:false;"></pre> 或代码块里展示无空格的 base64 字符串、哈希值等。
但对英文段落慎用：JavaScript 可能被切成 JavaScrip-t，影响理解。常见误用点：
- 给普通正文加
word-break: break-all，结果所有英文单词都被暴力切割 - 没配
max-width，导致小屏幕下文字挤成一团，行高失真 - 和
white-space: nowrap同时用，反而失效——后者禁止换行，前者想断行，冲突
white-space 和 overflow 必须配合使用
white-space 决定“要不要保留空格和换行”，overflow 决定“溢出后怎么收场”。单靠 overflow-wrap 或 word-break 不足以兜底。
典型组合：
- 常规段落：保持
white-space: normal+overflow-wrap: break-word - 单行标题截断：用
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 用户输入多行文本：用
white-space: pre-wrap+overflow-wrap: break-word，既保留换行又防长 URL 溢出
漏掉 overflow: hidden 是高频翻车点——即使断了行，若容器本身没设 overflow，仍可能因子元素撑开而破坏布局。
Flex/Grid 容器里长文本容易被忽略的细节
在 display: flex 或 display: grid 的父容器中，子项默认不收缩（flex-shrink: 1 但文本自身有最小宽度），overflow-wrap 可能压根不触发。
必须显式加这几条才能生效：
-
min-width: 0（对 flex item）或min-inline-size: 0（更现代） -
overflow: hidden（触发 BFC，让换行计算有边界） - 避免父容器设
white-space: nowrap，否则子元素的换行规则会被继承压制
例如视频列表中 .vidinfo > a 溢出，光写 overflow-wrap: break-word 不够，得补 min-width: 0 才真正起效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
