overflow-wrap: break-word 单独使用几乎必然失效，必须配合 max-width（提供换行依据）、min-width: 0（解除 flex/grid 子项抗压缩行为）及清除 white-space: nowrap（避免换行被强制禁用）才能生效。
只写 overflow-wrap: break-word 几乎一定失效，必须配合 max-width、min-width: 0 和清除 white-space: nowrap 才能真正起作用。
为什么 overflow-wrap: break-word 在移动端经常不生效
它不是“开关式”属性，而是一个依赖上下文的换行策略：只对无空格、无自然断点（如 /、-、.）的连续字符串生效；一旦父容器没宽度约束、或被 flex 默认行为锁死，它就静默退出。
- 父容器缺少
max-width或明确width—— 浏览器根本不知道“该在哪折” - 元素在
display: flex容器中，子项默认min-width: auto，拒绝压缩，overflow-wrap彻底失去触发条件 - 继承了
white-space: nowrap（常见于按钮、表格单元格、某些 UI 框架的默认样式） - 内容含 Unicode 窄空格（ ）或零宽空格（），它们会阻断断行逻辑
Flex 容器里长单词不换行的硬解法
这不是 CSS 写错了，是 Flex 的默认行为在“抗压”。子项宁可撑宽容器，也不愿收缩换行。
- 给子元素显式加
min-width: 0（flex: 1虽隐含此值，但 iOS Safari ≤15.6 不总识别） - 若子项还设了
flex-shrink: 0，min-width: 0也无效，必须先删掉它 - 避免用
overflow: hidden替代min-width: 0——它虽能触发 BFC 间接重置最小宽度，但在某些 Android WebView 中表现不稳定 - 检查是否套在
inline元素里（如默认的<a></a>），需确保最近的块级父容器已应用换行样式
移动端兼容写法与易忽略的坑
iOS Safari 12.2+ 支持 overflow-wrap: break-word，但老版本（如 iOS 11）只认旧名 word-wrap: break-word；微信 X5 内核则完全不支持 overflow-wrap: anywhere。
- 安全组合必须双写：
word-wrap: break-word+overflow-wrap: break-word+word-break: break-all（后者兜底） -
word-break: break-word已废弃，现代浏览器不保证支持，别用 - 别全局设置
word-break: break-all——它会在中文环境把“数据库”切成“数”+“据”+“库”，应只加在明确含长英文的 class 上（如.api-path、.token-value） - 若内容来自
v-html或dangerouslySetInnerHTML，样式必须作用在包裹容器上，不能只写在内联标签里
中英文混排时的隐藏陷阱
中文本身每个字都是天然断点，浏览器认为“有地方可断”，于是跳过 overflow-wrap 的兜底逻辑——结果就是夹在中文里的英文长串（如 test123456789）依然溢出。
- 解决方案是组合：
word-break: keep-all（禁中文内断） +overflow-wrap: break-word（保英文长串不断行） - iOS 12 以下不支持
keep-all，需补-webkit-word-break: keep-all - 别指望
hyphens: auto解决问题——它依赖语言字典和字体支持，移动端基本不可靠
真正卡住人的从来不是哪一行 CSS 该写，而是得先判断这段文字——能不能被切断语义。token 可以，Error: invalid_token 却不该切在冒号前；URL 可以按斜杠断，但邮箱 user@example.com 就不该在 @ 前硬切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
