根本原因是flex子项默认min-width: auto阻止收缩，必须在直接子元素上设min-width: 0、父容器设width/max-width，并移除flex-shrink: 0，再配合overflow-wrap: break-word和word-break: break-all才生效。
Flex子项不换行，根本不是overflow-wrap没生效
写了overflow-wrap: break-word却还是撑爆容器？不是CSS写错了，是它压根没机会触发——Flex子项默认min-width: auto，浏览器会先拼命把盒子拉宽，直到整串eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9完整显示完，根本不会“让出空间”给换行。你加的断行规则，连执行条件都没满足。
必须同步做的三件事
只改一个地方，其他全白搭：
- 在子元素上加
min-width: 0（关键！覆盖Flex默认最小宽度） - 确保父容器有
width或max-width（比如max-width: 100%或width: 300px） - 删掉
flex-shrink: 0（它会让子项彻底拒绝压缩）
overflow-wrap和word-break怎么配才靠谱
overflow-wrap: break-word优先保单词完整，对https://example.com/very-long-path这种可能完全不换；word-break: break-all则不管语义，超界就切。稳妥组合是：
overflow-wrap: break-word; word-break: break-all;
但注意：word-break: break-word已废弃，别用；break-all在中文环境慎用，可能把“数据库”切成“数据”和“库”，建议只加在明确含长英文的类上，比如.log-id、.token。
表格、移动端、input里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不是“可选项”。漏掉min-width: 0，其他所有样式都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
