Flex子项加word-break: break-all不换行，根本原因是默认min-width: auto阻止压缩，必须显式设min-width: 0（直接子元素上），并配合max-width、white-space: normal及移除flex-shrink: 0才能生效。
Flex子项加了word-break: break-all还是不换行？先看min-width
不是word-break失效，而是Flex子项默认min-width: auto在“护着”那串长文本。浏览器宁可把整个容器拉宽，也不让文字换行——哪怕你写了break-all，它根本没机会执行。
必须显式加min-width: 0，告诉浏览器：“这个子项可以缩到0，别管那串eyJhbGciOi有多长”。这不是可选项，是前提条件。
-
min-width: 0只对Flex容器的**直接子元素**生效，嵌套一层就无效 - 别依赖
flex: 1隐含的min-width: 0，旧版Safari（≤15.6）可能不认 - 如果子项还设了
flex-shrink: 0，min-width: 0也救不了——得先删掉它
overflow-wrap: break-word和word-break: break-all怎么选？
两者行为差异很大，选错会导致英文ID被乱切、中文被硬拆，或该断的地方不断。
-
overflow-wrap: break-word（旧名word-wrap: break-word）：只在整词放不下时才断，优先保单词完整，适合URL、邮箱、日志ID这类字符串 -
word-break: break-all：在任意字符间硬断，比如把user_id_123456789切成user_id_123和456789，适合纯哈希、base64等不可语义分割内容 - 绝对别用
word-break: break-word——它是已废弃写法，现代浏览器不保证支持
移动端和表格里为什么加了也不生效？检查这三处
就算min-width: 0和overflow-wrap都写了，换行仍可能不触发，因为换行不是“自动发生”，而是“超出可用空间后被迫发生”。
- 父容器是否漏了
width或max-width？比如Flex容器没设max-width: 100%，子项就会撑满视口 - 表格里用
overflow-wrap必须配table-layout: fixed和列宽（如td { width: 200px; }），否则忽略 - 移动端要双写：
word-wrap: break-word（iOS 11及更早） +overflow-wrap: break-word（现代标准），只写一个会失效
表单控件、<pre class="brush:php;toolbar:false;"></pre>、<code>怎么办？
word-break和overflow-wrap对<input>、<textarea></textarea>、<pre class="brush:php;toolbar:false;"></pre>这些元素基本无效，它们有自己的一套渲染逻辑。
-
<input type="text">无法自动换行，只能靠width+overflow: hidden截断，或换用<textarea></textarea> -
<textarea></textarea>默认支持换行，但需加resize: none防止拖大，并用width/max-width约束 -
<pre class="brush:php;toolbar:false;"></pre>和<code>默认white-space: pre，必须重置为white-space: pre-wrap或normal才能配合overflow-wrap
真正卡住换行的，从来不是word-break本身，而是它和min-width、white-space、flex-shrink之间的配合关系。漏掉其中任何一个，样式就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
