overflow-wrap: break-word 是解决长链接撑破容器的首选方案，需配合显式 width/max-width、禁用 white-space: nowrap，并在 flex/grid 中设置 min-width: 0 才生效。
长链接撑破容器的典型表现
容器宽度固定，但内部出现一长串无空格的 URL 或 Base64 字符时，div 直接横向溢出，滚动条弹出或内容跑出视口。这不是 CSS 没生效，而是默认行为：浏览器优先保持单词/连续字符完整性，overflow-wrap 正是为这类场景设计的断行开关。
它不改变盒模型尺寸，也不触发重排，只在必要时允许在任意字符间换行——和 word-break: break-all 不同，它更保守，只在“无其他断点可选”时才切开长串。
正确设置 overflow-wrap 的三要素
仅写 overflow-wrap: break-word 常常无效，因为还依赖两个前提：
-
width或max-width必须显式设定（百分比、rem、px都行，fit-content不算） - 父容器不能有
white-space: nowrap（会强制禁用所有换行） - 推荐同时加
word-break: break-word以兼容旧版 Safari（overflow-wrap在 Safari 10.1+ 才完全支持）
最小可用组合：
.link-container {
width: 300px;
overflow-wrap: break-word;
word-break: break-word;
}
overflow-wrap vs word-break 的关键区别
二者都影响断行，但触发逻辑不同：
-
overflow-wrap: break-word：先找自然断点（空格、标点），找不到才在长串中间切；对英文段落友好，不会把 “hello” 强行切成 “hel-lo” -
word-break: break-all：无视语义，任何位置都能断，适合纯数据展示（如日志 ID），但会让可读性暴跌 -
word-break: keep-all：中文/日文下禁止单字断开，但对长英文链接完全没用——它不解决你的问题
所以处理用户提交的 URL，overflow-wrap: break-word 是更安全的选择。
容易被忽略的 Flex/Grid 场景
当容器是 display: flex 或 display: grid 时，子项默认不收缩，默认 min-width: auto 会阻止 overflow-wrap 生效。
- 必须给子元素加
min-width: 0（Flex 项）或min-width: 0+overflow: hidden（Grid 项） - 如果子项是
<a></a>标签，还需确认没设white-space: nowrap（某些 UI 库默认加） - 不要依赖
text-overflow: ellipsis来“修复”，它只管截断显示，不解决溢出本身
复杂布局里，overflow-wrap 往往只是拼图的一角，漏掉 min-width: 0 就等于白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
