优先用 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: ...) 中显式覆盖：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) {
.title {
white-space: normal;
overflow-wrap: break-word;
}
}
另外，text-overflow: ellipsis 必须配合 white-space: nowrap + overflow: hidden + 固定宽度才能生效，不能和换行混用。
移动端 iOS Safari 的 overflow-wrap 兼容性坑
iOS 12+ 支持 overflow-wrap 标准写法，但部分老版本（如 iOS 11.3）仍需要 word-wrap 回退。不过更隐蔽的问题是：当文本内含零宽空格（）或软连字符（）时，Safari 对 overflow-wrap: break-word 的处理不如 Chrome 稳定，可能跳过断点。
- 建议双写：
word-wrap: break-word; overflow-wrap: break-word; - 避免依赖
实现断行，改用 CSS 控制更可靠 - 真机测试时重点看微信内置浏览器（X5 内核）——它对
overflow-wrap支持较差，有时需降级为word-break: break-all
最麻烦的不是语法写错，而是断行策略和容器尺寸、布局模式（flex/grid）、字体渲染共同作用的结果——调一个属性前，先确认容器是否真的“有边界”。
