overflow-wrap: break-word才是长URL的正确解法，它优先在/、.、-等自然断点处换行，仅当容器宽度不足时才退至字母级断开，需配合max-width或width、table-layout: fixed（表格场景）及white-space: normal生效，且不可与word-break: break-all共存。
overflow-wrap: break-word 才是长 URL 的正确解法
直接用 word-break: break-all 处理 URL 是错的——它会把 https:// 拆成 https:/ /，或把 example.com 切成 examp le.com，语义断裂且不可点击。
overflow-wrap: break-word（旧写法 word-wrap: break-word）才是推荐方案：它先找 /、.、- 这类自然断点，实在放不下才退到字母级。对 https://api.example.com/v2/users/123456789，大概率在斜杠后换行，保留可读性。
- 必须搭配
max-width或width才生效；只写overflow-wrap但父容器没限宽，照样溢出 - 若 URL 在
<td>里，需同时设table-layout: fixed，否则列宽由内容决定，overflow-wrap不触发 - 不要和
word-break: break-all共存——前者会被后者完全覆盖，尤其在 Firefox 中可能渲染异常
表格单元格里加 overflow-wrap 为什么还是溢出？
常见失效不是属性写错了，而是布局层压制了换行逻辑。最典型的是：
-
<td>父级<table>没设table-layout: fixed→ 默认auto布局下，浏览器优先撑开列宽，overflow-wrap被忽略 -
<td>内含图片或<pre>标签 → 它们默认white-space: pre或max-width: none，需单独重置：white-space: normal+max-width: 100% - 用了
flex包裹表格 →display: flex下子项默认min-width: auto，会锁死收缩，必须给<td>加min-width: 0
如何让 URL 在斜杠/点号处可靠折行？
overflow-wrap 对 / 的识别有局限，有时仍在域名中间硬切。更稳的方式是人工插入零宽空格 （即 ）：
立即学习“前端免费学习笔记（深入）”；
- 插在 URL 的语义断点后：
https://api.example.com/<wbr>v2/users</wbr>，而不是https://api.<wbr>example.com</wbr> - 服务端渲染时可在
/、?、&后自动注入，前端无需 JS 即可响应式折行 - 注意 iOS 15 以下 Safari 渲染
有轻微间距问题，建议搭配font-size: 0.98em微调
table-layout: fixed 是表格防溢出的关键前提
不设 table-layout: fixed，光靠 word-break 或 overflow-wrap 都是徒劳。因为默认 auto 布局下，浏览器先按内容算列宽，再决定是否换行——结果往往是列被撑开，换行根本没机会发生。
- 启用
table-layout: fixed后，列宽由<col>、首行<td>的width或 CSSwidth决定，内容再长也得往里塞 - 配合
max-width: 100%和overflow-x: auto（兜底滚动），才能真正控制表格整体宽度 - 若用
%设列宽，需确保所有列加起来 ≤100%，否则最后一列会被压缩或溢出
真正卡住的不是属性本身，而是 width 限制、table-layout 模式、white-space 状态这三者的协同。漏掉任意一个，overflow-wrap 就形同虚设。
