overflow-wrap: break-word单独写无效，因其是兜底断词策略而非换行开关，需容器有明确宽度（如max-width）、非white-space: nowrap、inline元素转块级、Flex子项加min-width: 0等条件才能触发。
为什么 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被忽略，得先删掉它 - 嵌套 Flex 场景要逐层加：
.item是 Flex 子项 → 加min-width: 0；其内部又有display: flex的文字块 → 那个文字块也得加 - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，必须显式写
overflow-wrap 和 word-break 怎么搭配才稳妥
它们分工明确，不是加强关系：
- 用户可见内容（URL、邮箱、API 路径）→ 主用
overflow-wrap: break-word，靠斜杠、点号等自然断点优先换行，fallback 切词也克制 - 纯技术字段（日志 ID、token、base64）→ 加兜底
word-break: break-all，防无可断点时失效 - 中文为主正文 → 用
word-break: break-word（注意不是break-all），对中文按字断、英文保词义 - 绝对别用
word-break: break-word—— 已废弃，现代浏览器不保证支持
表格和移动端容易被忽略的硬性条件
换行属性在这些上下文里不是“写了就生效”，而是有强制配套规则：
- 表格中必须设
table-layout: fixed，且th/td要显式声明width或max-width，否则所有换行属性被忽略 - 移动端 iOS 11 及更早需双写：
word-wrap: break-word（旧名兼容） +overflow-wrap: break-word - 移动端 X5 内核（微信）不支持
overflow-wrap: anywhere，别指望用它替代break-all - 字体加载期间可能因字宽变化导致撑开，加
max-width: 100%+box-sizing: border-box可缓解
实际最难的不是记住哪条规则，而是每次看到撑开，都要顺藤摸瓜查四件事：父容器有没有 max-width、子项是不是 Flex 直接子、min-width 是否被其他规则覆盖、flex-shrink: 0 还开着。漏掉任意一环，效果就消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
