优先用 word-break 和 overflow-wrap 组合而非 word-wrap；需设容器宽度、避免 white-space: nowrap 遗留；iOS Safari 需回退 word-wrap，X5 内核建议降级 word-break: break-all。
小屏幕文字不换行？优先用 word-break 而不是 word-wrap
现代浏览器中，word-wrap 已被重命名为 overflow-wrap，且语义更偏向“在必要时断词换行”，而真正解决长单词/URL撑破容器的问题，word-break: break-all 或 word-break: break-word（已废弃）更直接。但注意：word-break: break-all 会强制打断任意单词（包括英文单词中间），word-break: normal + overflow-wrap: break-word 才是兼顾可读性的组合。
常见错误是只设 white-space: normal 却忽略容器宽度限制，导致文字仍溢出。必须确保父容器有明确宽度（如 max-width: 100%）或使用响应式单位（rem、%）。
-
overflow-wrap: break-word：仅在单词整体放不下时才换行，保留单词完整性 -
word-break: break-word是旧写法，已不推荐；word-break: break-all无差别断行，慎用 - 配合
hyphens: auto可启用连字符断字（需注意 Safari 需加-webkit-前缀）
文字溢出容器却没滚动条？检查 overflow 的层级和取值
overflow 不生效，往往是因为它只对「块级定位上下文」起作用——如果容器是 display: inline 或未设置 width/height，overflow: hidden 或 scroll 就不会触发裁剪或滚动。小屏幕下尤其要注意 flex 容器中的子项默认不收缩，需显式加 min-width: 0 或 overflow: hidden 才能生效。
-
overflow: hidden会隐藏溢出内容，但不提供滚动能力 -
overflow: auto仅在内容超出时显示滚动条，适合不确定长度的文本区域 - 移动端慎用
overflow: scroll（iOS Safari 会强制显示滚动条，影响视觉） - 若父容器是
flex且子元素含长文本，必须给该子元素设overflow: hidden+min-width: 0
响应式断行失效？媒体查询里要重置 white-space
很多开发者设了 white-space: nowrap 用于桌面端标题一行显示，但忘了在小屏媒体查询中还原。结果就是小屏下文字既不换行也不滚动，直接溢出视口。正确做法是在 @media (max-width: ...) 中显式覆盖：
立即学习“前端免费学习笔记（深入）”；
