优先用 overflow-wrap: break-word，它只在必要时折行且不破坏单词语义；flex/grid 容器需加 min-width: 0 才生效；移动端需双写 word-wrap 和 overflow-wrap；避免使用已废弃的 word-break: break-word。
word-break 和 word-wrap（现在叫 overflow-wrap）到底用哪个
小屏幕长单词撑破容器，本质是浏览器默认不折行。关键不是“要不要折”，而是“在哪折”——word-break 强制在任意位置断，overflow-wrap（旧名 word-wrap）只在必要时把整个单词挪到下一行或中间折开（需配合 break-word 值）。
实际选哪个，看内容类型：
- 英文技术文档、日志 ID、哈希值这类不可语义分割的字符串，用
overflow-wrap: break-word更安全，避免把user_id_123456789拆成user_id_123+456789 - 纯中文或中英混排场景，
word-break: break-word或break-all效果接近，但break-all会把汉字也硬拆（如“苹果”拆成“苹”+“果”），一般不用 - 如果容器宽度极小（比如窄侧边栏），且内容允许牺牲可读性保布局，才考虑
word-break: break-all
flex 或 grid 容器里长单词不折行的隐藏原因
很多人给父容器加了 display: flex 或 display: grid，再怎么设 overflow-wrap 都没用——因为 flex item 默认有 min-width: auto，会阻止内容收缩折行。
必须显式覆盖：
- 对 flex item 加
min-width: 0（或overflow: hidden，后者会触发 BFC，间接重置 min-width） - 对 grid item 同样加
min-width: 0，尤其当它在grid-template-columns: 1fr这类弹性轨道里 - 别依赖
white-space: normal，它默认就有，问题不在这里
移动端 Safari 对 overflow-wrap 的兼容细节
iOS 12.2+ 支持 overflow-wrap: break-word，但老版本（如 iOS 11）只认旧名 word-wrap: break-word。光写一个不够。
稳妥写法必须双写：
text {
word-wrap: break-word;
overflow-wrap: break-word;
}
注意：word-break: break-word 是非标准写法，Chrome 曾短暂支持过，现在已废弃，不要用。
字体加载期间长单词突然撑开布局怎么办
WebFont 加载前用系统字体渲染，字宽偏小；等自定义字体加载完成，字宽变大，原来能塞下的单词可能就溢出了——这不是 CSS 没生效，是时机问题。
两个务实解法：
- 用
font-display: swap减少 FOIT，让文本尽早按最终字体尺寸渲染 - 给容器加
max-width: 100%和box-sizing: border-box，避免因字体切换导致 width 计算偏差 - 真要严控，可在 JS 加载完字体后手动触发一次
element.style.setProperty('overflow-wrap', 'break-word')，强制重绘（极少需要）
CSS 处理长单词最麻烦的点从来不是属性本身，而是它和 flex/grid/min-width/字体加载这些机制缠在一起，单独调一个值往往没用。得一层层确认约束条件是否被意外激活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
