加 word-wrap: break-word 或 word-break: break-all 无效的三大前提是：容器缺宽度约束、Flex/Grid 子项未设 min-width: 0、white-space: nowrap 干扰。
直接加 word-wrap: break-word 或 word-break: break-all 很大概率没用——不是属性写错了，而是你漏掉了三个关键前提：容器宽度约束、Flex/Grid 默认收缩限制、以及 white-space 干扰。
为什么写了 overflow-wrap: break-word 还是不换行
这个属性只在“单词放不下整行”时才触发断行，前提是浏览器得知道“一行有多宽”。如果父容器没设 width、max-width 或弹性约束（比如 flex: 1），它会先无限撑宽容器，根本不会走到“要不要断”的逻辑。
- 检查目标元素是否在
display: flex或display: grid容器里 —— Flex 子项默认min-width: auto，会死扛不缩，必须显式加min-width: 0 - 确认没继承
white-space: nowrap（常见于按钮、表格单元格、UI 框架组件） - 表格中使用需配合
table-layout: fixed和明确的th/td宽度，否则忽略该规则
word-break: break-all 在 Flex 里失效的真正原因
不是 Safari 或微信 WebView 不支持，而是子项被 min-width: auto 锁死了收缩能力。哪怕你写了 word-break: break-all，浏览器也优先拉伸容器来塞下整个字符串，而不是换行。
- 必须给子元素加
min-width: 0（flex: 1隐含此值，但旧版 Safari ≤15.6 可能不识别） - 若子项还设了
flex-shrink: 0，min-width: 0也无效 —— 得先删掉它 - 移动端 X5 内核（微信）不支持
overflow-wrap: anywhere，别指望用它替代break-all
overflow-wrap: break-word 和 word-break: break-all 到底怎么选
这不是二选一，而是主次搭配：overflow-wrap: break-word 是主逻辑，负责语义化断行；word-break: break-all 是兜底，专治 base64、哈希、API 路径这类“根本不算单词”的字符串。
立即学习“前端免费学习笔记（深入）”；
-
overflow-wrap: break-word：适合用户可见内容，如长链接、邮箱、带连字符的术语，不会把filename.pdf切在点号前 -
word-break: break-all：适合日志 ID、token、https://api.example.com/v1/users/abc123def456，但会把中文“数据库”切成“数”+“据”+“库”，所以只加在明确含长英文的 class 上（如.token-value） - 别用
word-break: break-word—— 已废弃，现代浏览器当不存在
移动端和兼容性最容易忽略的三点
写完样式发现 iOS Safari 或微信里还是溢出？大概率卡在这三处：
- 中文混排场景下，
word-break: keep-all必须和overflow-wrap: break-word同时用，否则英文部分仍可能撑开 - 内容来自
v-html或dangerouslySetInnerHTML时，样式必须作用在包裹容器上，不能只写在内联标签（如<span>）上 - 旧版 Safari（≤15.6）对
min-width: 0在 Flex 中的支持不稳定，稳妥起见可补-webkit-min-width: 0
真正难的不是写哪一行 CSS，而是判断这段文字能不能被切断语义：token 可以，Error: invalid_token 就不该切在冒号前。
