Flex子项不收缩是根本原因，必须在直接子元素上显式设min-width: 0以解除min-width: auto锁定，再配合overflow-wrap: break-word或anywhere及width/max-width约束才能生效。
Flex子项不收缩是根本原因
写了overflow-wrap: break-word或word-break: break-all却没用，大概率不是属性写错了，而是Flex直接子项卡在min-width: auto上——它会死扛不缩，宁可撑宽父容器也不换行。这个值不会出现在DevTools「Computed」里，但真实生效。
- 必须显式给Flex直接子元素加
min-width: 0，不能写在父容器或孙子节点上 - 如果子项同时设了
flex-shrink: 0，min-width: 0会被忽略，得先删掉flex-shrink: 0 - 旧版Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，建议一律显式写
overflow-wrap: anywhere比break-word更可靠
在240px宽的卡片里处理verylongemailaddress@example.com这类串，overflow-wrap: anywhere能自然断开，不拆分example；而overflow-wrap: break-word先试空格/连字符，失败才硬切，窄屏下容易仍溢出。
-
overflow-wrap: anywhere已在Chrome 107+、Firefox 109+、Safari 16.4+稳定支持 - 需兼容Safari 15.4以下时，降级用
word-break: break-word（注意：非标准但实测有效） - 两者都依赖
width或max-width，否则浏览器认为“还有空间”，根本不触发断行
word-break: break-all不是万能解，但必须兜底
word-break: break-all适合/v1/users/abc123def456、sha256:8a3b4cf9e0这类技术字段，但它会把helloWorld切成hell+oWorld，中文“数据库”变成“数”+“据”+“库”。所以别全局设，只加在明确含长英文的class上，比如.api-path或.token-value。
- 微信X5内核不支持
overflow-wrap: anywhere，此时word-break: break-all是唯一靠谱选项 - 稳妥写法是组合：
overflow-wrap: break-word; word-break: break-all;，前者主逻辑，后者兜底 - 绝对别用
word-break: break-word——已废弃，现代浏览器当不存在
移动端最容易漏的三个约束条件
小屏空间紧张，漏一个，布局立刻错乱：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
max-width或width，比如Flex项没配flex-basis或flex: 1，浏览器优先撑宽而非换行 - 内容被
white-space: nowrap锁死（常见于按钮、表格单元格、UI框架组件），得先覆盖为white-space: normal - 嵌套Flex场景要逐层设：
.item加了min-width: 0，但如果里面还有个display: flex的头像+文字块，那文字块也得单独加min-width: 0
Error: invalid_token里的冒号前不该断。 
