overflow-wrap: break-word 单独写无效，因其是兜底策略而非换行开关，仅在整词超容器宽度时触发，需配合 max-width、white-space: normal、min-width: 0（Flex/Grid中）及块级显示等约束才生效。
overflow-wrap: break-word 单独写为什么没用
它不是“开启换行”的开关，而是兜底策略：只在整词放不下时才切开。但浏览器得先确认“放不下”，这就要求容器有明确宽度边界。常见失效原因包括：
• 父容器没设 max-width 或 width，浏览器优先无限撑宽容器
• 目标元素是 inline 级（如 span），需加 display: block 或 inline-block
• 祖先元素继承了 white-space: nowrap，直接压制所有换行行为
• 内容在 pre 标签里，默认 white-space: pre，overflow-wrap 不触发
Flex 容器里长文本撑开盒子的真正瓶颈是 min-width: auto
Flex 直接子项默认 min-width: auto（等价于 fit-content），会把一整串无空格字符串（如 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9）当成不可分割块，宁可撑开父容器也不缩自己。这时加任何换行属性都无效——因为根本没走到换行逻辑。
• 必须显式给 Flex 直接子元素加 min-width: 0，这是解锁收缩能力的开关
• 如果子项还设了 flex-shrink: 0，min-width: 0 被忽略，得先删掉它
• Safari ≤15.6 对 flex: 1 隐含的 min-width: 0 支持不稳定，一律显式写 min-width: 0
表格单元格内容失控？table-layout: fixed 是前提
表格默认是 table-layout: auto，列宽由内容撑开，所有断行规则都会被忽略。
• 必须加 table-layout: fixed 到 table 元素上
• 必须给列（th 或 td）设显式宽度，例如 width: 200px 或 max-width: 200px
• overflow-wrap: break-word 要加在 td 或 th 上，不是 table 或 tr
• 若列中还有 white-space: nowrap，断行仍不会发生
移动端和 Safari 特别容易翻车的点
Safari 对 overflow-wrap 在 flex + min-width: fit-content 组合下支持极差；iOS Safari 还需补一句 -webkit-hyphens: auto（仅对英文有效）才能改善断行位置。
• 移动端小屏下，min-width: 0 必须配合 max-width: 100%，否则 flex 子项在 flex-direction: column 里仍可能水平溢出
• 调试时最该盯住的三个 computed 值：min-width 是否真为 0px、flex-basis 是否稳定为 0px、white-space 是否为 nowrap
• 旧版 Safari 认 word-wrap: break-word，新项目建议写标准名 overflow-wrap: break-word，但兼容可双写
立即学习“前端免费学习笔记（深入）”；
