文字撑破容器主因是white-space:normal不处理无空格长串，应配word-break:break-all+white-space:normal强制断行，中英文混排时需额外加hyphens:auto并设置lang属性。
文字在响应式布局里突然撑破容器怎么办
多数情况是默认的 white-space 值（normal）对长单词或连续无空格字符串不起作用，浏览器宁可溢出也不换行。这不是 bug，是规范行为——尤其在英文 URL、邮箱、token 或中英文混排时高频出现。
-
white-space: normal只在空格、制表符、换行符处断行，对aaaaaaaaaaaaaaaaaa或https://example.com/very-long-path-with-no-hyphens无效 - 移动端小屏下，一个未截断的长 token 就可能直接撑开
flex容器或破坏grid列宽 - 别急着加
overflow: hidden，那只是藏问题，不是解决问题
用 word-break 强制断词的三种典型场景
word-break 是专门处理“要不要切开单词”的开关，和 white-space 配合使用才完整：
-
word-break: break-all：暴力切开任意连续字符（含英文单词），适合日志 ID、哈希值等纯标识类文本，但会把 “international” 切成 “inter-nation-al”，影响可读性 -
word-break: break-word（非标准，仅旧版 Chrome/Edge 支持）：已废弃，不要用 -
word-break: keep-all：中文/日文/韩文不换行（除非有空格），英文照常断，适合标题类内容；注意它对zh-CN有效，但对en-US的长单词无效
真正稳妥的组合是：word-break: break-all + white-space: pre-wrap（保留换行符+自动换行）或 white-space: normal（更常用）。
white-space 的四个关键取值怎么选
它决定“空格怎么处理”和“是否允许换行”，必须和 word-break 协同：
立即学习“前端免费学习笔记（深入）”；
-
white-space: normal：默认值，忽略多余空白，允许换行 —— 和word-break: break-all搭配最通用 -
white-space: pre-wrap：保留空格与换行符，同时允许容器边界处自动换行 —— 适合用户输入的富文本预览 -
white-space: nowrap：禁止任何换行，哪怕加了word-break也无效 —— 别误用 -
white-space: pre-line：合并空白但保留换行符，换行行为类似normal—— 少数需要语义换行的场景用
常见错误：只设 word-break: break-all 却没确认 white-space 是 normal，结果在某些安卓 WebView 里依然不生效。
中英文混排时的隐藏坑：Unicode 字符宽度与断行逻辑
中文字符默认是全角，浏览器按“字”为单位断行；英文是半角，按“词”断。但遇到 test测试123abc 这种串，不同引擎表现不一：
- Chrome / Safari：倾向在 ASCII 和 CJK 边界处断行（如
test
），但不保证
测试123abc - Firefox：更保守，可能整个串当一个“词”，仍需
break-all - 解决方案：对混排内容统一加
word-break: break-all+white-space: normal，再用hyphens: auto（需语言属性lang="en"）辅助英文连字符断行
别依赖浏览器自动识别语言来断行，尤其是后端吐出的动态文本，没有 lang 属性时，hyphens 基本无效。
