根本原因是Flex子项默认min-width:auto，需显式设min-width:0才能触发换行；再配合overflow-wrap:break-word（优先）或word-break:break-all（兜底），并确保父容器有width/max-width限制。
Flex子项写了overflow-wrap: break-word还是撑破容器？
不是属性没生效，是它根本没机会生效——overflow-wrap只在“内容超出可用空间时”才触发换行，而Flex子项默认min-width: auto，浏览器会先拼命撑宽自己，直到整串eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9完整显示，压根不给换行留空间。
必须同步做三件事：
- 在子元素上加
min-width: 0（关键！覆盖Flex默认最小宽度） - 确保父容器有
width或max-width（比如max-width: 100%或width: 300px） - 删掉可能存在的
flex-shrink: 0（它会让子项彻底拒绝压缩）
为什么只写overflow-wrap: break-word不够，还得加word-break: break-all？
overflow-wrap: break-word优先保持单词完整性，对https://example.com/very-long-path-with-no-spaces这种可能完全不换行；word-break: break-all则不管语义，只要超界就切。两者组合才是稳妥方案：
overflow-wrap: break-word; word-break: break-all;
立即学习“前端免费学习笔记（深入）”；
注意：word-break: break-word是已废弃写法，别用；break-all在中文环境慎用，它可能把“数据库”切成“数据”和“库”，所以建议只加在明确含长英文的类上，比如.log-id、.token。
表格、移动端、表单控件里overflow-wrap为啥失效？
不同上下文对换行规则的约束完全不同：
- 表格中必须配
table-layout: fixed+ 列宽（如td { width: 200px; }），否则忽略overflow-wrap - 移动端要双写：
word-wrap: break-word（兼容iOS 11及更早） +overflow-wrap: break-word（现代标准） -
input和textarea基本无视overflow-wrap——它们走自己的渲染逻辑；input只能靠width+overflow: hidden截断，textarea需加resize: none防拖拽，并用max-width约束
最常被忽略的细节：Flex项的min-width不是“可选项”
很多人以为设了flex: 1或flex: 1 1 auto就万事大吉，但flex-basis: auto只是参考内容尺寸，真正卡住换行的是隐式min-width: auto。它不会因为写了overflow-wrap就自动让步。
显式写min-width: 0不是“锦上添花”，是换行生效的前提条件。漏掉它，其他所有样式都白搭。
