word-break: break-all需配合min-width: 0、max-width及white-space: normal才生效；单独使用在Flex容器中常因min-width: auto失效，且必须避免flex-shrink: 0和nowrap干扰。
word-break: break-all 在移动端不是“开了就灵”，它必须和 min-width: 0、max-width、以及对 white-space 的清理配合使用，否则大概率失效。
Flex 容器里加了 word-break: break-all 还是不换行？
这不是属性失灵，而是 Flex 子项默认 min-width: auto，会死守内容宽度，拒绝压缩——哪怕你写了断行样式，浏览器也先撑宽容器，再考虑换行。
- 必须显式加
min-width: 0（flex: 1虽隐含该值，但旧版 Safari ≤15.6 可能不识别） - 父容器得有
max-width或width，否则没有“换行依据” - 检查是否被
white-space: nowrap继承（比如来自按钮、表格单元格或 UI 框架的默认样式） - 如果子项还设了
flex-shrink: 0，min-width: 0也救不了——得先删掉它
word-break: break-all 和 overflow-wrap: break-word 到底该用哪个？
选错会导致中文被乱切、英文 token 语义断裂，或者该断的地方不断。
-
word-break: break-all：在任意字符处硬断，比如把https://api.example.com/v1/users/abc123def456切成https://api.exa+ 换行 +mple.com/v1/us...，适合日志 ID、token、哈希串等纯技术字段 -
overflow-wrap: break-word：只在整词放不下时才断，优先保单词完整，观感更合理，适合用户可见的长链接、邮箱、带连字符的术语 - 稳妥组合写法：
overflow-wrap: break-word; word-break: break-all;—— 前者主逻辑，后者兜底 - 别用
word-break: break-word：已废弃，现代浏览器不保证支持
移动端兼容性和容易忽略的坑
Android WebView 和 iOS Safari 对 word-break: break-all 支持良好（Chrome 58+、Safari 10.1+），但以下三点常被跳过：
- 微信内置浏览器（X5 内核）不支持
overflow-wrap: anywhere，别指望它替代break-all -
word-break: break-all在中文环境会把“数据库”切成“数”+“据”+“库”，所以不能全局设，只加在明确含长英文的 class 上（如.api-path、.token-value） - 若内容来自
v-html或dangerouslySetInnerHTML，样式必须作用在包裹容器上，而不是内联标签本身
真正卡住人的从来不是写哪一行 CSS，而是得先判断这段文字——能不能被切断语义。token 可以，错误提示里的 Error: invalid_token 却不该切在冒号前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
