长链接不换行导致横向滚动，因浏览器将URL视为不可分割单词；应设max-width和overflow-wrap: break-word（推荐）或word-break: break-all，并在Flex中加min-width: 0。
长链接不换行导致页面横向滚动
移动端浏览器默认对 http:// 或 https:// 开头的超长 URL 不做断行，哪怕容器宽度只有 320px，它也硬生生横着撑开整个 viewport，触发横向滚动条。这不是 bug，是浏览器对 URI 的默认渲染策略——它把整个链接当做一个不可分割的“单词”。
解决思路不是改链接，而是告诉 CSS：“哪怕它是单词，也给我折行”。关键就两个属性配合：
-
word-break: break-all：粗暴打断任意位置（包括英文单词中间），适合纯技术文档场景 -
overflow-wrap: break-word（旧写法word-wrap: break-word）：只在无空格长串处折行，优先保留语义完整性，更推荐 - 必须搭配
width或max-width才生效——没宽度限制，浏览器根本不知道“该在哪折”
为什么只加 word-wrap: break-word 常常没用
常见失效原因是父容器没设宽度约束，或者被 Flex/Grid 布局“撑开”了。比如 display: flex 下的子元素，默认 min-width: auto，会拒绝收缩，overflow-wrap 就形同虚设。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给含链接的容器（如
<p>、<div>）显式设max-width: 100% - 若在 Flex 容器中，给链接所在元素加
min-width: 0（释放 flex item 的最小宽度锁定） - 避免对链接本身直接设
white-space: nowrap—— 这会彻底禁用换行
典型修复样式：
.link-container {
max-width: 100%;
min-width: 0;
overflow-wrap: break-word;
}
break-all 和 break-word 在 URL 场景下的实际差异
对 https://example.com/very-long-path-with-no-spaces-and-very-very-very-long 这种链接：
-
word-break: break-all可能在ver和y中间就断开，变成ver...+ 换行 +y-long...，影响可读性 -
overflow-wrap: break-word会尽量找“自然断点”，比如斜杠/后、连字符-后，或域名与 path 的分界处，观感更合理 - Android WebView 低版本（Chrome overflow-wrap 支持弱，必要时可双写：
word-wrap: break-word; overflow-wrap: break-word;
内联链接（<a>）需要额外处理吗
不需要单独给 <a> 加样式，但要注意：如果链接被包裹在 display: inline 元素里（比如默认的 <a>），而父块级容器没设 overflow-wrap，那就白搭。
最简兜底方案：
- 在链接最近的块级父容器上统一加
overflow-wrap: break-word - 避免用
text-overflow: ellipsis替代换行——它只截断显示，不解决溢出和滚动问题 - 如果链接带
target="_blank"且内容来自用户输入，务必同时做 XSS 过滤，别让换行修复变成注入入口
真正容易被忽略的是：移动端 Safari 对 overflow-wrap 在 position: absolute 元素里的支持不稳定，这种场景建议改用 word-break: break-word 并确保父容器有明确 width。
