CSS布局中的长文本处理_white-space与word-break的应用

长文本溢出容器不换行的根源是 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 得一起配，少一个就可能漏掉换行点。