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> 里，需同时设 <code>table-layout: fixed，否则列宽由内容决定，overflow-wrap不触发 - 不要和
word-break: break-all共存——前者会被后者完全覆盖，尤其在 Firefox 中可能渲染异常 <td> 父级 <code><table> 没设 <code>table-layout: fixed→ 默认auto布局下，浏览器优先撑开列宽，overflow-wrap被忽略<td> 内含图片或 <code><pre class="brush:php;toolbar:false;"></pre>标签 → 它们默认white-space: pre或max-width: none，需单独重置：white-space: normal+max-width: 100%- 用了
flex包裹表格 →display: flex下子项默认min-width: auto，会锁死收缩，必须给<td> 加 <code>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> 的 <code>width或 CSSwidth决定，内容再长也得往里塞 - 配合
max-width: 100%和overflow-x: auto（兜底滚动），才能真正控制表格整体宽度 - 若用
%设列宽，需确保所有列加起来 ≤100%，否则最后一列会被压缩或溢出
真正卡住的不是属性本身，而是 width 限制、table-layout 模式、white-space 状态这三者的协同。漏掉任意一个，
overflow-wrap就形同虚设。 - 插在 URL 的语义断点后：
表格单元格里加 overflow-wrap 为什么还是溢出？
常见失效不是属性写错了，而是布局层压制了换行逻辑。最典型的是：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
