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