flex子项需显式设min-width: 0才能触发overflow-wrap换行；overflow-wrap: break-word适合语义敏感内容，anywhere适合固定宽场景；换行生效须满足父容器有宽度限制、无white-space: nowrap、非pre/textarea等特殊元素。
Flex子项写了overflow-wrap还是撑破？先看min-width: 0
不是属性没生效，是它根本没机会触发。Flex子项默认min-width: auto，浏览器会优先拉宽整个容器来塞下verylongemailaddress@example.com这种串，而不是换行。必须在Flex的**直接子元素**上显式写min-width: 0——这是开关，不是可选项。
常见踩坑点：
-
flex: 1在Chrome/Firefox里隐含min-width: 0，但Safari ≤15.6不认，别省略这行 - 如果子项同时设了
flex-shrink: 0，min-width: 0直接失效，得先删掉flex-shrink: 0 - 嵌套Flex时，每层直接子项都要单独加
min-width: 0，中间套一层<div>就断链 <h3>overflow-wrap: break-<a style="color:#f60; text-decoration:underline;" title="word" href="https://m.php.cn/zt/15726.html" target="_blank">word</a>和anywhere怎么选？别只写一个</h3> <p><code>overflow-wrap: break-word是保守策略：优先在空格、点号、斜杠后断，实在不行才切词；overflow-wrap: anywhere更激进：只要放不下，立刻在任意字符间断，且会改变min-content宽度计算。实操建议：
Cn Password Generator下载安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。
- 用户可见内容（长链接、邮箱、带连字符术语）→ 主用
overflow-wrap: break-word - 固定列宽表格、日志面板这类对可读性要求低的场景 → 可用
overflow-wrap: anywhere - 兼容老Safari（≤15.4）？双写：
overflow-wrap: break-word; overflow-wrap: anywhere;，后者会被忽略但无害
为什么加了换行属性还是溢出？检查三个硬前提
换行不是自动发生的，而是“超出可用空间后被迫触发”。漏掉任一前提，
overflow-wrap或word-break都等于没写。必须确认：
- 父容器有
width或max-width（比如max-width: 100%比固定width更安全） - 没继承
white-space: nowrap（常见于按钮、表格单元格、UI组件库） - 不在
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<input>里直接用——这些元素有自己的换行逻辑，overflow-wrap基本无效
表格和移动端最容易漏的配置
表格里光写
overflow-wrap没用，必须配table-layout: fixed+ 明确列宽（如td { width: 200px; }），否则浏览器按内容自适应，换行规则被无视。移动端还要注意：
- 微信X5内核不支持
overflow-wrap: anywhere，别指望它替代word-break: break-all - 中英文混排场景，
word-break: keep-all必须和overflow-wrap: break-word一起用，否则英文部分仍可能撑开 - 全局设
word-break: break-all风险很大——它会把中文“数据库”切成“数”+“据”+“库”，只加在明确含长英文的class上（如.token-value）
Error: invalid_token却不该切在冒号前。 - 用户可见内容（长链接、邮箱、带连字符术语）→ 主用
