必须显式设min-width: 0，否则overflow-wrap: break-word无效；还需父容器有宽度约束、非nowrap及块级上下文，三者缺一不可。
光写 overflow-wrap: break-word 基本没用——它不是开关，而是“兜底许可”，必须满足宽度约束、可换行上下文、无收缩锁定这三件事，才会真正触发。
Flex/Grid 子项死活不换行？先查 min-width 计算值
Flex 或 Grid 容器的直接子元素默认有 min-width: auto（即 min-width: fit-content），浏览器会把它理解为“至少得塞下整个长串”，比如 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 这种 base64，宁可把卡片拉宽也不换行。
- 用 DevTools 的 Computed 面板搜
min-width，确认值是0px，别靠肉眼猜 - 必须加在 Flex/Grid 的**直接子元素**上，例如
.card-content，套一层div再设就无效 - 如果该子项还写了
flex-shrink: 0或grid-column: span 2类似强约束，min-width: 0会被忽略，得先删掉 - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，一律显式写min-width: 0
overflow-wrap: break-word 单独写为什么总失效
它只在“整词放不下当前行”时才允许切开，但这个判断依赖三个硬前提：
- 父容器有明确宽度：必须有
width、max-width或受外层限制（如max-width: 100%） - 没被
white-space: nowrap锁死：常见于按钮、表格单元格、某些 UI 框架组件，检查继承链 - 元素是块级或已转为可换行上下文：
span、a这类 inline 元素需加display: block或inline-block -
<pre class="brush:php;toolbar:false;"></pre>、<code>、<input>等原生元素自带white-space: pre或特殊渲染逻辑，overflow-wrap基本无效，得换思路（如用textarea+white-space: pre-wrap）
中英文混排或纯技术字符串，怎么选断行策略
别一刀切。不同内容类型要分层处理：
立即学习“前端免费学习笔记（深入）”；
- 用户可见正文（如消息气泡、API 描述）：用
overflow-wrap: break-word主逻辑，再加word-break: normal保语义 - 纯技术字段（token、日志 ID、哈希、无分隔符 URL）：必须加兜底
word-break: break-all，否则break-word可能完全不触发 - 中英文混排场景：避免
word-break: keep-all，它会压制所有断行行为；中文本身按字断，但英文部分仍需上述组合 - 移动端兼容写法：补一句
word-wrap: break-word（overflow-wrap的旧名），iOS 11 及更早版本认这个
表格里长单词溢出，光设断行属性没用
表格默认是 table-layout: auto，列宽由内容撑开，所有断行规则都会被忽略。
- 必须加
table-layout: fixed到table元素上 - 必须给列（
th或td）设显式宽度，例如width: 200px或max-width: 200px - 再在单元格内加
overflow-wrap: break-word和min-width: 0（如果单元格是 flex 容器子项） - 别用
word-break: break-word——它早在 Chrome 早期就被废弃，现代浏览器不保证识别
最常被忽略的是：断行不是样式叠加就能生效的线性过程，而是一连串依赖条件的链式判断。漏掉 min-width: 0 或缺了 max-width，后面所有属性都等于没写。
