单靠word-break或overflow-wrap不能保护盒模型，真正起保护作用的是max-width、box-sizing和white-space的组合；overflow-wrap: break-word是溢出时的兜底策略，需容器有明确宽度、white-space可折行、flex子项设min-width: 0等条件才能生效。
单靠 word-break 或 overflow-wrap 都不能“保护”盒模型——它们只管换行，不管尺寸；真正起保护作用的是 max-width、box-sizing 和 white-space 的组合。
为什么 overflow-wrap: break-word 写了却还撑破容器
它不是“自动换行开关”，而是“溢出时的兜底策略”。浏览器必须先确认“内容真放不下”，才会触发断词。
- 父容器没设
max-width或width（比如纯div在 flex 容器里，默认宽度不可控） - 元素继承或显式设置了
white-space: nowrap，直接禁用所有换行逻辑 - 在
display: flex子项中，min-width: auto默认锁死最小尺寸，宁可溢出也不收缩 - 表格单元格未配
table-layout: fixed+ 显式width，overflow-wrap不生效
word-break: break-all 什么时候能用、什么时候不能用
它不判断语义，只看位置：只要到容器右边界，就强行切一刀。适合纯数据字段，但会破坏可读性。
- 可用场景：
<td class="token">a1b2c3d4e5f6</td>、日志 ID、base64 片段 - 禁用场景：
<p>调用 UserAuthentication API</p>（可能切成UserAuthen+tication） - 别和
overflow: hidden搭配——后者会截掉末尾，不如让断开的内容可见 - 和
hyphens: auto同时写会失效，break-all直接覆盖断字逻辑
中英文混排下长单词仍溢出的典型解法
浏览器看到中文，就认为“已有自然断点”，跳过对英文长串的检查。必须显式压制中文断行，逼它去处理英文部分。
- 给容器加
word-break: keep-all（禁用中文内断） +overflow-wrap: break-word（保英文长串兜底） - iOS 12 以下需补
-webkit-word-break: keep-all - 若含
<code>标签，单独重置：code { word-break: break-all; }，否则 monospace 下overflow-wrap基本无效 - 避免依赖
white-space: normal——它本来就默认开启；关键是让容器“能缩”，而不是“能换”
最常被忽略的其实是 min-width: 0：Flex/Grid 子项默认不收缩，哪怕写了 overflow-wrap: break-word，它也宁愿横向滚动或撑破，也不低头换行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
