必须显式设置min-width: 0，因为flex子项默认min-width: auto会阻止收缩，导致overflow-wrap: break-word无法触发换行逻辑；还需确保父容器有width/max-width约束，且子项未设flex-shrink: 0。
Flex子项写了overflow-wrap: break-word还是撑破容器？先看min-width
不是属性没生效，是它根本没触发机会。Flex子项默认min-width: auto，浏览器宁可把整个容器拉宽，也不让文字换行——哪怕你写了overflow-wrap: break-word，它压根没走到“要不要断”的逻辑里。
必须在Flex的直接子元素上显式加min-width: 0，这是前提，不是可选项。旧版Safari（≤15.6）可能不认flex: 1隐含的min-width: 0，所以别省略这行。
- 如果子项还设了
flex-shrink: 0，min-width: 0也无效，得先删掉它 -
min-width: 0只对Flex容器的直接子元素生效，中间套一层<div>就失效 <li>用开发者工具检查computed值，确认<code>min-width真为0px，比肉眼判断更可靠 - Safari 15.4+、Chrome 82+才稳定支持
anywhere，老项目建议双写：overflow-wrap: break-word; overflow-wrap: anywhere; -
break-word支持IE10+，兼容性更广 - 别用
word-break: break-word——已废弃，现代浏览器不保证支持 - 父容器是否漏了
width或max-width？比如Flex容器没设max-width: 100%，子项就会撑满视口 - 表格里必须配
table-layout: fixed和明确列宽（如td { width: 200px; }），否则忽略所有换行规则 - 移动端要双写：
word-wrap: break-word（兼容iOS 11及更早） +overflow-wrap: break-word（现代标准） -
<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才允许断词
overflow-wrap: break-word和anywhere怎么选？别只写一个
overflow-wrap: break-word是保守策略：优先在空格、斜杠、点号后断，实在不行才切单词内部；overflow-wrap: anywhere更激进：只要放不下，立刻在任意字符间断，且会改变min-content宽度计算。
生产环境优先用break-word；anywhere适合固定列宽表格、日志面板这类对可读性要求低的场景。
移动端和表格里为什么加了也不生效？检查这三处
就算min-width: 0和overflow-wrap都写了，换行仍可能不触发，因为换行不是“自动发生”，而是“超出可用空间后被迫发生”。
中英文混排、<pre class="brush:php;toolbar:false;"></pre>、表单控件怎么办？
overflow-wrap和word-break对<input>、<textarea></textarea>、<pre class="brush:php;toolbar:false;"></pre>基本无效，它们有自己的一套渲染逻辑。
token可以，错误提示里的"Error: invalid_token"却不该切在冒号前。
