word-break: break-all 有时无效，因父容器缺宽度约束、Flex子项未设min-width: 0或被white-space: nowrap禁用换行；它适合技术字段，而用户可见文本应优先用overflow-wrap: break-word。
移动端长单词撑破容器，word-break: break-all 为什么有时没用
它确实能切开任意连续字符串，但前提是浏览器得“认这个容器有边界”。常见失效场景：父容器没设 width 或 max-width；内容在 flex 容器里且子项未加 min-width: 0；或者被 white-space: nowrap 直接锁死换行能力。不是属性失灵，是条件没凑齐。
word-break: break-all 和 overflow-wrap: break-word 到底该选哪个
看内容是否允许语义破坏：
- 技术字段（如
/v1/users/abc123def456、sha256:8a3b4cf9e0、日志 ID）→ 用word-break: break-all，确保不溢出 - 用户可见文本（如带连字符的英文术语、长链接、邮箱）→ 优先
overflow-wrap: break-word，只在整词放不下时才断，可读性更好 - 中英文混排正文（如评论、表单提示）→ 用
word-break: break-word（注意不是break-all），中文按字断，英文保词义
Flex 容器里加了 word-break: break-all 还是不换行？
这是最隐蔽也最高频的问题。Flex 子项默认 min-width: auto，会顶住压缩，哪怕你写了断行样式，它也先撑宽自己再考虑换行。必须显式加 min-width: 0 才生效：
.container { display: flex; }
.item { min-width: 0; word-break: break-all; }
如果还用了 flex: 1，它隐含 min-width: 0，但旧版 Safari（≤15.6）可能不识别，建议仍显式写。
立即学习“前端免费学习笔记（深入）”；
移动端兼容性和容易忽略的坑
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” 却不该切在冒号前。
