长英文不换行导致容器溢出时，应同时设置 overflow-wrap: break-word 和 word-break: break-all，并配合 max-width 或 width 限制容器宽度，表格需 table-layout: fixed，Flex 项需 flex-shrink: 1 和 min-width: 0。
长英文不换行导致容器溢出的典型表现
页面某个 div 突然横向滚动，或者表格列宽失控、文字直接顶破父容器边界——这基本是纯英文/URL/Token 类字符串（如 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...）没被截断或换行导致的。浏览器默认对连续无空格字符不触发换行，word-break: break-word 也救不了它，因为那只是“在单词内断”，而长英文根本不算“单词”。
overflow-wrap: break-word 和 word-break: break-all 怎么选
这两个是实际能起效的主力属性，但行为差异很大：
-
overflow-wrap: break-word：只在必要时断（即整词放不下才断），对中文、正常英文单词友好，但对超长 base64 或哈希串可能仍不触发——它优先尝试保持“单词完整性” -
word-break: break-all：粗暴，只要超出容器就断，无视语义，适合纯技术字符串（如日志 ID、token、路径），但会把helloWorld拆成hell+oWorld - 真正稳妥的做法是组合用：
overflow-wrap: break-word; word-break: break-all;，后者兜底，前者保日常体验
必须加 max-width 或 width 才生效
这是最常踩的坑：光写 overflow-wrap 没用，如果父容器本身没宽度限制（比如 display: inline-block 且内容超长，或 flex 项未设 flex-basis），浏览器会先无限撑宽容器，再考虑换行——结果还是溢出。
- 给目标元素加
max-width: 100%（相对父容器）或具体值（如max-width: 300px） - 若在表格中，需同时设
table-layout: fixed和列宽（th, td { width: 200px; }），否则break-word被忽略 - Flex 容器里，子项要加
flex-shrink: 1+min-width: 0（防止 flex 项默认不收缩）
兼容性与现代替代方案（text-wrap: balance 不适用）
text-wrap: balance 是新属性，但它用于“均匀分段多行文本”，和防溢出无关，别误用。老版本 Safari（overflow-wrap 支持弱，得加 word-wrap: break-word（word-wrap 是 overflow-wrap 的旧名，已废弃但保留兼容）。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; - 如果还要截断加省略号，得额外配
white-space: normal; text-overflow: clip;（ellipsis要求单行，冲突） - 注意：
break-all在中文环境可能把“数据库”错切成“数 据 库”，所以只加在明确含长英文的 class 上（如.log-token），别全局设
真正麻烦的是嵌套场景——比如一个 pre 里放 JSON，里面又有长字段。这时候不能只靠 CSS，得提前在 JS 里用 str.replace(/([a-zA-Z0-9]{30})/g, '$1\u200b') 插零宽空格，让浏览器有断点。CSS 是第一道防线，但不是万能解药。
