优先用overflow-wrap: break-word，它只在单词整体放不下时才断行，保留可读性；word-break: break-all会无差别切字，仅适用于日志id等纯数据场景，且需配合明确宽度和块级上下文才生效。
长英文单词导致容器溢出怎么办
直接用 word-break: break-all 最快见效，但会粗暴断词；更推荐 overflow-wrap: break-word（现代标准写法），它只在必要时才折行，保留可读性。
为什么 word-break: break-all 有时不按预期工作
它依赖父容器有明确宽度（比如 width 或 max-width），且不能是 display: inline。常见坑：<span></span> 或 <a></a> 默认 inline，加了 word-break 也无效。
- 必须确保目标元素有块级上下文：加
display: inline-block或display: block - 若父容器是 flex 容器，子项默认不换行，需额外加
flex-wrap: wrap - 不要只设
word-break，漏掉overflow-wrap—— 两者行为不同，word-break对空格分隔的短词也强行断，overflow-wrap只对超长无空格串生效
overflow-wrap: break-word 和 word-wrap: break-word 选哪个
word-wrap 是旧名，已被废弃；overflow-wrap 是 CSS3 正式属性名。所有现代浏览器都支持后者，建议只写 overflow-wrap: break-word，不必加前缀或 fallback。
注意：IE10+ 支持 overflow-wrap，IE9 只认 word-wrap —— 如果还要兼容 IE9，才需要双写：
div {
overflow-wrap: break-word;
word-wrap: break-word;
}
遇到 pre 或 code 标签里的长单词怎么处理
这些标签默认 white-space: pre，禁用换行。想让它折行，得显式覆盖：
- 加
white-space: pre-wrap（保留空格和换行，同时允许折行） - 再配
overflow-wrap: break-word处理无空格长串 - 避免用
white-space: normal，否则会丢失缩进和多空格格式
例如：<pre class="brush:php;toolbar:false;" style="white-space: pre-wrap; overflow-wrap: break-word;"></pre>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
