overflow-wrap: break-word 单独写基本无效，必须配合显式宽度（width/max-width）、min-width: 0（Flex/Grid 子项）、white-space: normal 且无 nowrap/pre 冲突才能生效。
overflow-wrap: break-word 单独写基本没用，它必须和显式宽度、min-width: 0（在 Flex/Grid 中）、以及不冲突的 white-space 配合才能生效。
为什么加了 overflow-wrap: break-word 还是撑破？
浏览器只在“内容超出当前行可用空间”时才触发断行，而 overflow-wrap 不负责定义这个“空间”。常见失效原因：
- 父容器没设
width或max-width，计算出的宽度是auto，等于内容本身宽度 - 内容在
display: flex或display: grid容器里，子项默认min-width: auto，会抵抗压缩，换行逻辑压根不启动 - 被
white-space: nowrap、white-space: pre或继承来的样式覆盖，直接禁用所有换行行为 - 用了
word-wrap: break-word但漏写了标准写法overflow-wrap: break-word，旧版 Safari 或 IE 可能不认
Flex/Grid 子项必须加 min-width: 0
这是最常被跳过的一步。Flex 和 Grid 的子项默认有 min-width: auto（实际表现接近 min-content），浏览器宁可拉宽整行也不折开一个 eyJhbGciOiJ。解决方式很明确：
- 在子元素上显式写
min-width: 0，不是父容器，也不是嵌套后代 - 如果子项还写了
flex-shrink: 0，先删掉——它会彻底封锁压缩路径 - 若用了
flex: 1，它隐含min-width: 0，但 iOS Safari ≤15.6 可能不识别，建议仍显式写 - 搭配
overflow-wrap: break-word和width/max-width才完整
overflow-wrap: break-word vs word-break: break-all
选哪个取决于内容是否允许语义破坏：
-
overflow-wrap: break-word：优先在空格、连字符后换行；实在没断点（如纯 URL）才切单词中间。适合用户可见文本，比如https://example.com/very-long-path -
word-break: break-all：无视语义，字母之间全可断。适合技术字段，比如日志 ID、token、Base64 片段，但会把JavaScript拆成Java+Script - 中英文混排正文推荐
word-break: break-word（注意不是break-all），中文按字断，英文保词义 - 别对
或font-family: monospace元素盲目加break-all，可读性会崩
移动端和兼容性要注意的坑
真实项目里卡住人的往往不是属性本身，而是环境细节：
- iOS Safari 对
overflow-wrap: anywhere不支持，别指望它替代break-word - 微信内置浏览器（X5 内核）不支持
overflow-wrap: anywhere，也部分降级处理break-word - 要兼容 IE11，必须同时写
word-wrap: break-word和overflow-wrap: break-word - 内容来自
v-html或dangerouslySetInnerHTML时，样式必须作用在包裹容器上，不能只写在内联标签里 - 表格单元格里用
overflow-wrap，必须配合table-layout: fixed和列宽声明（如td { width: 200px; }），否则无效
真正容易被忽略的是：这不是某个 CSS 属性的“开关问题”，而是浏览器在多个约束条件满足后才启动的换行决策。漏掉 min-width: 0、缺 max-width、或被 white-space 锁死，都会让整个链条中断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
