overflow-wrap: break-word写了不换行，根本原因是它仅在“内容宽度超过容器可用宽度”时才触发，而该条件需容器有明确width/max-width、子元素无white-space: nowrap、flex子项显式设min-width: 0且未被flex-shrink: 0锁定。
overflow-wrap: break-word 为什么写了还不换行
只写 overflow-wrap: break-word 几乎必然不生效——它不是独立开关，而是“条件触发器”。浏览器必须明确知道“容器边界在哪”，才会判断是否“溢出”。常见失效原因包括：
- 父容器没设
max-width或width（比如纯div在 flex 容器里默认撑满，但实际宽度不可控） - 被
white-space: nowrap、<pre class="brush:php;toolbar:false;"></pre>标签或white-space: pre覆盖，直接禁用所有换行逻辑 - 在
display: flex子项中，min-width: auto默认锁死最小尺寸，子元素宁可溢出也不压缩 - 中英文混排时，中文本身可按字断行，浏览器认为“有地方可断”，跳过对英文长串的兜底处理
flex/grid 容器里长单词失效怎么修
这是最常被卡住的场景：样式写了，预览也看着没问题，一上真机就横向溢出。根本不是属性问题，是布局机制在“抗压”。
- 给该元素加
min-width: 0（flex）或min-width: 0; min-height: 0（grid），松开默认最小尺寸锁定 - 或者显式设
flex-shrink: 1，让 flex item 主动参与收缩 - 避免只靠
width: 100%——如果父级是 inline 元素或未设宽的 flex 容器，这个百分比毫无约束力 - 别信
white-space: normal，它本来就默认开启；关键是让容器“允许压缩”，而不是“允许换行”
中英文混排里 test123456789 还是溢出怎么办
中文段落里夹着英文长串（如用户 ID、路径片段），overflow-wrap: break-word 常静默失效。因为浏览器看到中文，就判定“已具备自然断点”，不再检查英文部分是否超长。
- 组合使用：
word-break: keep-all禁止中文内断 +overflow-wrap: break-word保英文长串兜底 - iOS 12 以下不支持
keep-all，必须补-webkit-word-break: keep-all - 避免同时用
hyphens: auto——它对中英混排无效，且需lang属性配合，漏写即白配 - 若内容含
<code>标签，记得单独重置：code { word-break: break-all; }，否则 monospace 字体下overflow-wrap基本无效
word-break: break-all 到底能不能用
能用，但必须清楚它不是“让长单词换行”，而是“允许在任意两个字符之间插入换行点”——包括 JavaScript 拆成 Java 和 Script，APIKey 拆成 APIK 和 ey。
- 真实可用场景极窄：后台日志、调试面板、表格里的 token/UUID/base64 字段
- 在 flex/grid 子项中加了
break-all却没效果？八成还是被min-width: auto锁住了，同样要加min-width: 0 -
word-break: break-all和overflow-wrap同时存在时，后者完全被忽略——它们互斥，不能叠加强度 - 别用
word-break: break-word，它已被废弃，现代浏览器直接忽略，老项目里复制过来就是个无效声明
min-width: 0 可能比十行 CSS 更关键；而一次中文断行策略切换，可能让整个组件在 iOS 上表现完全不同。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
