长文本溢出容器不换行的根源是 white-space 被设为 nowrap 或 pre；中文长串需用 overflow-wrap: break-word 或 word-break: break-all；Flex/Grid 子项须加 min-width: 0 才能正常折行。
长文本溢出容器却不换行？检查 white-space 是否被意外设为 nowrap
很多情况下文本“撑爆”盒子，不是内容太长，而是 white-space 被设成了 nowrap 或 pre，强制禁用换行。尤其在表格单元格、按钮文字、卡片标题里容易中招。
常见错误现象：div 宽度固定但文字横向滚动或溢出，开发者第一反应调 overflow，其实根源在换行策略。
-
white-space: nowrap：完全禁止换行，空格和换行符都当普通字符处理 -
white-space: normal（默认）：按空格/制表符/换行符断行，但不会在长单词内断 -
white-space: pre-wrap：保留换行符和空格，同时允许自动换行——适合用户输入的富文本预览
中文长串无空格文本（如超长URL、base64）不折行？word-break 和 overflow-wrap 选哪个
中文本身没有空格分隔，纯汉字+数字+符号的长串（比如 https://example.com/very-long-path-with-no-spaces-and-1234567890）在 white-space: normal 下也不会折行，必须靠 word-break 或 overflow-wrap 干预。
-
word-break: break-all：粗暴断行，会在任意字符间切开，适合技术文档、日志展示，但对中文阅读体验差（如“处理”可能被切成“处|理”） -
overflow-wrap: break-word（旧名word-wrap: break-word）：只在必要时断单词，优先保持完整词，更安全；对中文效果接近break-all，但会尽量避开标点前后断 - 现代推荐组合：
white-space: normal; overflow-wrap: break-word;—— 兼顾语义与可用性
Flex/Grid 容器里文字不收缩？别忘了 min-width: 0
在 display: flex 或 display: grid 的子项中，即使写了 white-space: normal 和 overflow-wrap: break-word，长文本仍可能不折行。这是因为 flex item 默认有 min-width: auto，会阻止内容压缩。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：给文本所在元素加
min-width: 0 - 典型场景：侧边栏菜单项含长文件名、聊天消息气泡里的 URL、表格中
flex布局的单元格 - 注意：不要只加
overflow: hidden，它不解决换行问题，只是隐藏溢出部分
移动端 Safari 对 word-break 支持有坑？用 overflow-wrap 更稳
iOS 15.4 之前，Safari 对 word-break: break-all 在某些字体渲染路径下表现异常，比如中英文混排时突然跳行或断错位置。这不是 bug，是 WebKit 对换行算法的保守实现。
- 兼容性更优写法：
overflow-wrap: break-word+word-break: break-word（后者是旧规范别名，部分老 Android 浏览器需要） - 避免单独依赖
word-break: break-all做响应式断行 - 真机测试时重点看微信内置浏览器（X5 内核）和 iOS Safari，它们对 CSS 换行策略的解释差异最大
最麻烦的其实是嵌套场景：比如一个 grid 里套 flex，再放一段带连字符的英文——这时候 min-width: 0、overflow-wrap、hyphens 得一起配，少一个就可能漏掉换行点。
