word-break: break-all 单独使用无效，需配合 width/max-width、white-space: normal 及 min-width: 0 等约束条件；推荐优先用 overflow-wrap: break-word 处理长 url，它优先在自然断点（如 /、.）换行，兼顾可读性与兼容性。
word-break: break-all 单独写根本不会生效
只加 word-break: break-all 几乎一定失败，因为它不是“开启换行”的开关，而是“允许在任意字符间打断”的策略声明。浏览器必须先确认“这行已经满了”，才可能触发打断逻辑——而判断依据就是容器有没有明确宽度限制。
常见失效组合：
- 父容器没设
width或max-width（比如用display: inline-block但没限宽） - 元素本身是
display: inline或继承了white-space: nowrap - 内容在
<pre class="brush:php;toolbar:false;"></pre>里，默认white-space: pre，直接压制所有换行行为
Flex/Grid 容器里 min-width: auto 是隐形锁
这是最常被忽略的坑。Flex 子项默认有 min-width: auto，意思是“哪怕你把容器压到 1px，我也拒绝把 URL 拆开”。它优先撑开容器，而不是换行——overflow-wrap 或 word-break 全部失效。
验证方法很简单：临时加 border: 1px solid red，如果文字伸出边框外，八成就是这个原因。
修复方式（三者通常要一起加）：
-
min-width: 0（或更现代的min-inline-size: 0） -
max-width: 100%（不能只靠父容器“看起来窄”） -
overflow-wrap: break-word（比word-break: break-all更安全）
overflow-wrap: break-word 才是长 URL 的推荐解法
overflow-wrap: break-word 不是暴力切字，它会先找自然断点（如 /、.、-），实在找不到再退到字母级。对 https://example.com/api/v2/users/123456789 这类 URL，大概率在斜杠后换行，保留可读性。
但它有硬性前提，缺一不可：
-
width或max-width（比如max-width: 100%） -
white-space: normal（不能是nowrap或pre） -
overflow-wrap: break-word（别再用已废弃的word-wrap: break-word）
Android WebView 低版本支持弱，必要时可双写：word-wrap: break-word; overflow-wrap: break-word;
别和 white-space: nowrap 同时用
white-space: nowrap 的语义是“禁止任何换行”，它会直接覆盖 overflow-wrap 和 word-break 的所有行为。很多组件库全局设置了它（比如按钮、标题类组件），你在局部加 overflow-wrap 就完全没反应。
调试建议：
- 用浏览器 DevTools 查看 computed 样式，确认
white-space最终值是不是normal - 临时加
white-space: normal !important看是否恢复换行，就能快速定位是否被覆盖 - 避免在链接本身上直接设
white-space: nowrap，除非你真想禁用换行
min-width: auto 和 white-space 的隐式继承。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
