必须显式设置min-width: 0才能使word-break或overflow-wrap生效，否则min-width: auto会锁死收缩能力导致断行失效；再配合white-space: normal和overflow-wrap: break-word。
Flex子项加了word-break: break-all还是不换行？先看min-width
这不是word-break失效，而是Flex子项被默认的min-width: auto锁死了——浏览器宁可把整个容器撑宽，也不愿压缩内容去换行。必须显式写min-width: 0，否则所有断行样式都形同虚设。
常见错误操作包括：
- 只写
flex: 1，指望它隐含min-width: 0；但旧版 Safari（≤15.6）可能不识别，得显式声明 - 子项同时设了
flex-shrink: 0，此时min-width: 0也救不了，得先删掉flex-shrink: 0 - 把
min-width: 0写在父容器上，但它只对Flex直接子元素生效，嵌套一层就无效
overflow-wrap: break-word和word-break: break-all到底该用哪个
选错会切开URL、token或中文词，导致语义断裂。两者不是“加强版”关系，而是解决不同问题：
-
overflow-wrap: break-word（兼容写法：word-wrap: break-word）：只在整词放不下时才断，优先保空格、斜杠、点等自然断点，适合用户可见的长链接、API路径、邮箱 -
word-break: break-all：在任意字符间硬断，比如把https://api.example.com切成https://api.exa+换行+mple.com，仅适用于日志ID、哈希、base64等纯技术字段 - 绝对别单独写
word-break: break-word——它已被废弃，现代浏览器不保证支持
移动端和微信X5内核里容易漏掉的三件事
写了样式却在真机上不生效，大概率卡在这三点：
- 微信内置浏览器（X5内核）不支持
overflow-wrap: anywhere，别指望它替代break-all -
word-break: break-all在中文环境会把“数据库”切成“数”+“据”+“库”，不能全局设，只加在明确含长英文的class上，如.api-path、.token-value - 内容来自
v-html或dangerouslySetInnerHTML时，样式必须作用在包裹容器上，而不是内联标签本身——否则CSS选择器根本匹配不到
white-space: nowrap是断行杀手，常被继承却没人检查
很多UI框架、按钮组件、表格单元格默认设了white-space: nowrap，它会直接禁用所有自动换行逻辑，哪怕你写了overflow-wrap也完全没用。
排查建议：
- 在开发者工具里检查目标元素的computed styles，确认
white-space是否为normal - 如果父级有
white-space: nowrap，子元素需显式覆盖：white-space: normal - 特别注意
<pre class="brush:php;toolbar:false;"></pre>、<code>这类元素，默认white-space: pre或pre-wrap，也要重置
Error: invalid_token却不该切在冒号前。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
