根本原因是flex子项默认min-width:auto，需显式设min-width:0才能触发换行；再配合overflow-wrap:break-word（优先）或word-break:break-all（兜底），并确保父容器有width/max-width限制。
flex子项长单词撑破容器，根本原因是min-width:auto没被覆盖
Flex子项默认有min-width: auto（等价于min-width: fit-content），浏览器会优先保障内部不可折行内容的完整显示，哪怕把整个父容器拉宽。这时候光写word-break: break-all或overflow-wrap: break-word完全无效——因为换行逻辑压根没触发，容器先被撑开了。
必须显式加min-width: 0，告诉浏览器：“这个子项可以缩到0，别护着那串eyJhbGciOi...了”。它不是可选项，是前提条件。
-
min-width: 0只对flex直接子元素生效，嵌套一层就不管用 - 不能依赖
flex: 1隐含的min-width: 0，旧版Safari可能不认，得显式写 - 如果子项还设了
flex-shrink: 0，min-width: 0也救不了——先检查并删掉它
word-break: break-all 和 overflow-wrap: break-word 到底该用哪个
两者行为差异很大，选错会导致中文被乱切、英文ID语义断裂，或者该断的地方不断。
word-break: break-all会在任意字符处硬断，比如把user_id_123456789拆成user_id_123和456789；overflow-wrap: break-word则只在整词放不下时才断，且优先保持单词完整性，更适合日志ID、token这类字符串。
- 纯英文/URL/哈希串：优先用
overflow-wrap: break-word，再兜底加word-break: break-all - 中英混排或中文为主：
word-break: break-word（兼容性好）或word-break: break-all都行，但别用break-all全局设，只加在.log-token这类明确含长英文的class上 - 绝对别用
word-break: break-word单独写——它是已废弃的写法，现代浏览器不保证支持
为什么加了属性还是不换行？检查这三处宽度限制
就算min-width: 0和overflow-wrap都写了，如果容器本身没宽度边界，浏览器依然不会触发换行。换行不是“自动发生”的，而是“超出可用空间后被迫发生”的。
- 父容器是否漏了
width或max-width？比如flex容器是display: flex但没设max-width: 100%，子项就会撑满视口 - 表格里用
overflow-wrap必须配table-layout: fixed和列宽（如td { width: 200px; }），否则忽略 - 移动端要双写：
word-wrap: break-word（iOS 11及更早） +overflow-wrap: break-word（现代标准），只写一个会失效
textarea、input这些表单控件怎么处理长文本
word-break和overflow-wrap对input和textarea基本无效——它们有自己的渲染规则，不走通用文本流。
-
input[type="text"]：无法自动换行，只能靠width+overflow: hidden截断，或改用contenteditable="true"的div -
textarea：默认支持换行，但需加resize: none防拖拽，并用width和max-width约束尺寸 - 若要模拟输入框效果，用
div[contenteditable]+white-space: pre-wrap+min-width: 0+overflow-wrap: break-word
最容易被忽略的是：所有这些样式必须落在**含长文本的最内层块级元素上**，而不是flex容器本身；而且min-width: 0和宽度限制（max-width）必须同时存在，缺一不可。不然就是给空气写CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
