overflow-wrap: break-word 是小屏长 url 的默认解法，先自然换行再兜底断词，需配合 max-width 等宽度限制及 min-width: 0（flex/grid 下）才能生效。
overflow-wrap: break-word 是小屏长 URL 的默认解法
它不是“强制断行”，而是“兜底换行”：先尝试在空格、标点、CJK 字边界自然换行；实在放不下时，才在长单词内部断开。对 https://api.example.com/v1/users?token=abc123xyz 这类内容最安全，语义不碎，可读性高。
但必须配合宽度限制才生效——比如 max-width: 100% 或 width: 280px。没宽度约束，浏览器根本没换行动机，写了等于白写。
常见错误：给父容器设了 flex，子元素写了 overflow-wrap: break-word 却不换行 → 原因是 flex 子项默认带 min-width: auto，锁死了压缩。修复只需加 min-width: 0 或 overflow: hidden。
word-break: break-all 只适合纯技术字符串
它会在任意两个字符之间硬切，不管是不是单词中间。能用的场景很窄：
sha256:abcdef1234567890eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9- 日志列表里的 Base64 片段
不能用于用户可见文本：
-
user@example.com会被切成user@exa… -
Download Report可能变成Downlo… - 中英混排如
文件名-test123456789会断成文件名-te…，语义断裂
注意：在 display: flex 或 display: grid 容器里，word-break: break-all 常失效——必须同时加 min-width: 0 和 white-space: normal 才可能起效。
中英混排必须配 word-break: keep-all
单用 overflow-wrap: break-word 在中文段落夹英文长串（如“测试 test123456789”）时经常无效。因为浏览器默认对非 CJK 文本按空格断行，而这里没空格。
word-break: keep-all 的作用是：阻止中文被劈开，同时允许英文按需断（注意：对纯英文无效）。搭配使用才可靠：
.mixed-text {
max-width: 100%;
overflow-wrap: break-word;
word-break: keep-all;
/* iOS 12 以下兼容 */
-webkit-word-break: keep-all;
}
别漏掉 -webkit-word-break: keep-all —— Safari 旧版本对 keep-all 支持弱，不加这句，真机上可能完全不换行。
overflow-wrap: anywhere 更适合弹性布局
当容器宽度由内容决定（比如 flex 子项、grid 自适应列），overflow-wrap: anywhere 比 break-word 更激进：它会让元素的最小内容宽度缩到单个字符宽，更容易“挤进去”。
适用场景：
- 卡片标题含长 URL，且要自适应收缩
- 表格某列宽度设为
min-content，又不能被/api/v1/long-path撑爆
但它不支持连字符（hyphens），且断点更随意。如果需要保留语义节奏，优先选 break-word；如果首要目标是“不撑破布局”，anywhere 更稳。
最常被忽略的是：断行从来不是单属性的事。它依赖三者协同：width 或 max-width 提供约束、white-space: normal 开放换行权限、display 类型不锁死尺寸（比如 min-width: auto）。少一个，overflow-wrap: break-word 就只是 CSS 注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
