overflow-wrap: break-word 必须配合宽度限制（如max-width: 100%）才生效，否则因无换行上下文而失效；应作用于块级父容器而非内联元素，并注意ios兼容性、min-width: 0释放flex项约束、中英混排需keep-all与break-word协同、\_需兜底断行等细节。
overflow-wrap: break-word 必须配合宽度限制才生效
只写 overflow-wrap: break-word 几乎一定没效果。浏览器不会主动去“折”一个没有宽度约束的元素——它默认按内容自然伸展，压根不触发断行逻辑。你得先告诉它“最多能占多宽”，比如 max-width: 100%、width: 300px 或 flex-basis: 300px。
常见错误是给 <a></a> 标签本身加这个属性，但它的父容器是 display: inline 或未设宽的 <span></span>，导致整个链路失去换行上下文。真正该加的地方，是链接最近的块级父容器（如 <p></p>、<div>）。
<ul>
<li>
<code>white-space: normal 必须保持（不能被覆盖成 nowrap 或 pre）
text-overflow: ellipsis 替代断行——它只隐藏内容，不解决溢出和横向滚动overflow-wrap 静默降级，建议双写：word-wrap: break-word; overflow-wrap: break-word;
Flex/Grid 容器里 word-break: break-all 为什么失效
不是属性写错了，是 flex item 默认的 min-width: auto 在锁死宽度。哪怕你写了 word-break: break-all，浏览器也优先保内容完整，拒绝压缩，结果就是 URL 硬撑着横穿屏幕。
修复很简单：在含长链接的子元素上加 min-width: 0 或 overflow: hidden，松开这个最小宽度保护。Grid 同理，哪怕列定义是 1fr，也要单独设 min-width: 0。
- 别对
<table-cell></table-cell>用break-all，Safari 旧版本支持不稳定 -
break-all和hyphens: auto互斥，开了连字符就废掉强制断行 - 如果链接嵌套在 UI 框架组件里（如 Ant Design 的
Typhography.Text），检查是否被user-select: none或pointer-events: none连带影响点击
中英混排场景下 keep-all 和 break-word 要配着用
纯英文 URL 用 overflow-wrap: break-word 就够了，但中文段落里夹着 test123456789 这种串时，单靠它可能不断——因为浏览器认为“测试test123456789”是一个整体词，且中文之间无空格，找不到自然断点。
这时要加 word-break: keep-all：它阻止中文被劈开，同时把英文部分交给 overflow-wrap 去兜底处理。注意，keep-all 对纯英文无效，所以必须和 break-word 协同。
- iOS 12 及更早版本不支持
word-break: keep-all，需加-webkit-word-break: keep-all兜底 - 别用
word-break: break-word——这是已废弃的值，写了等于没写 - 如果容器内还有代码片段（如
const myVariableName = 123），建议额外加white-space: pre-wrap，兼顾缩进保留与必要断行
下划线_和连字符-在断行逻辑里完全不是一回事
浏览器把 _ 归为 Unicode 的 Pc（Connector）类，和字母数字一样对待，word-break 对它基本无效；而 - 是 Pd（Dash），天然支持断行。所以 user_profile_settings_v2 会撑破容器，但 user-profile-settings-v2 通常能正常折在 - 后。
想让 _ 也能断，不能靠 hyphens: auto（它对 _ 无效），得靠 overflow-wrap: break-word + 显式宽度 + min-width: 0 组合触发兜底断行。某些极端情况，甚至得用 JS 插入软断点 或零宽空格 。
- 别信“加了
word-wrap: break-word就万事大吉”的说法——_不算“不可断单词”，它需要更明确的宽度压迫和兜底授权 - Android WebView 版本碎片化严重，低版本对
overflow-wrap支持弱，break-all是更稳的备选 - 最隐蔽的坑：断行后 URL 被切成多行，但中间换行位置恰好落在协议头（如
https://）之后，导致点击区域错位或不可点击
