white-space: pre-wrap 是唯一能同时保留换行又允许折行的取值，它原样保留 \n、\t 和空格，并在容器右边界自动折行，既不丢失原始格式，也不导致横向溢出。
white-space: pre-wrap 是唯一能同时保留换行又允许折行的取值
后端返回带 \n 的 URL 列表（比如日志里的多行链接），想原样显示又不让超长 URL 撑破表格，white-space: pre-wrap 是唯一靠谱解法。它既保留源码中的换行符，又允许在容器边界自动折行——不像 white-space: pre 那样拒绝折行导致横向滚动，也不像 white-space: normal 那样直接吞掉 \n。
常见错误是给 <td> 加了 white-space: normal 再手动插 <br>，结果后端传来的 \n 全失效，所有链接挤成一行；或者用 pre 却忘了配 overflow-x: auto，用户得拖着看完整 URL。
-
pre-wrap对中文、英文、URL 混排也友好，不会把https://example.com/path?x=1&y=2当作一个“词”锁死不折 - 别在
<td>上直接写style="white-space: pre-wrap"就完事——要确认父级<table>没设table-layout: fixed且没覆盖该样式 - 如果后端返回的是 HTML 字符串（含
<a href="...">），必须先用textContent或innerText渲染，或对内容做 HTML 转义，否则\n可能被解析成标签，引发 XSS
overflow-wrap: break-word 必须配合 display:block 才生效
单个超长 URL（如 Base64 或无斜杠路径）卡在 <td> 里撑开整行？overflow-wrap: break-word 是首选，但它只在元素有明确宽度约束时才触发。而 <td> 默认是 display: table-cell，不响应 width 或 max-width，所以直接加这个属性大概率无效。
解决方案不是硬套 word-break: break-all，而是让容器“认得清边界”：
立即学习“前端免费学习笔记（深入）”；
- 给
<td>加display: block或inline-block，再设max-width: 200px（按需调整） - 若表格用了
table-layout: fixed，确保该<td>有width值（比如width: 200px），否则overflow-wrap不计算 - Flex/Grid 布局中嵌套表格？子项得加
min-width: 0，否则默认min-width: auto会锁死压缩能力
wbr 标签只在特定条件下起作用，别乱塞
<wbr> 不是 <br>，它只是建议浏览器“这里可以断”，是否真断取决于当前容器宽度、CSS 折行策略和插入位置。很多开发者往 URL 中间狂插 <wbr>，结果毫无反应，根本原因是没满足触发条件。
真正有效的用法很窄：
- 必须配合
overflow-wrap: break-word（或word-wrap: break-word），否则<wbr>被忽略 - 容器要有显式
width或max-width，否则浏览器永远觉得“还能塞下” - 插入点要合理：URL 推荐放在
/、.、?、=后，比如https://example.com/<wbr>very/<wbr>long/<wbr>path</wbr></wbr></wbr> - 别插在单词中间，如
hel<wbr>lo</wbr>—— 英文单词内部不是自然断点，浏览器大概率无视
table-layout: fixed 是表格场景下的隐性前提
不设 table-layout: fixed，表格列宽由内容撑开，max-width 和 overflow-wrap 在 <td> 上基本形同虚设。尤其当某列文本极短、另一列全是超长 URL 时，后者会把整行拉宽，其他列被压缩到不合理宽度。
正确做法是全局控制：
- 给
<table>加table-layout: fixed，再给每列<th>或<col>设固定width（如width: 20%或像素值） - 此时
<td>的overflow-wrap: break-word才能基于列宽计算是否断行 - 慎用
word-break: break-all—— 它会让https://被切成https:/和/example，后半段点击失效；仅限后台 ID 列等纯展示场景
最易被忽略的点：flex 或 grid 容器里嵌表格时，table-layout: fixed 仍要设，但父容器的 min-width 和 overflow 也得同步检查，否则表格本身又被外层撑开。
