表格单元格空格消失是因white-space: normal默认合并空白符；用white-space: pre-wrap可保留换行和空格并自动折行，需搭配overflow-wrap: break-word防长单词溢出。
表格单元格里空格全没了？不是HTML错，是white-space默认值在干活
表格单元格（<td>或<code><th>）默认使用<code>white-space: normal，所有连续空格、制表符、换行符都会被合并成单个空格，回车变成空格，缩进彻底消失。这不是bug，是规范行为——哪怕你写的是<td> hello</td>，渲染出来也只有一格空格。
用white-space: pre-wrap最稳妥，别直接上pre
给<td>加<code>white-space: pre-wrap能同时满足三个实际需求：保留用户输入的换行符、保留开头/中间多个空格（比如缩进对齐）、自动在容器边界折行防止横向溢出。
- ✅ 正确写法：
<td style="white-space: pre-wrap;">第一行\n 第二行（两个空格）</td> - ❌ 别用
pre：它保留空格和换行，但禁用自动换行，一个长URL或JSON字段会把整个表格撑宽，移动端直接出现横向滚动条 - ⚠️ 注意字体：若内容含缩进（如代码片段、树形结构），建议同步加
font-family: monospace，否则空格宽度不一致，视觉对齐失效
white-space: pre-line适合“有段落感但不care缩进”的场景
如果表格存的是用户留言摘要、带换行的短文本，且首行缩进不重要（比如“标题↵↵正文”），pre-line更轻量：
- 它会把连续空格/制表符压成一个空格，避免因误粘连空格导致文字挤成一团
- 保留
\n并转为换行，每段之间有空行 - 自动换行，不依赖等宽字体，排版更宽容
- ⚠️ 缺点：吃掉首行缩进——若表格用于展示Markdown引用块（
> text）或列表项（- item），层级会丢失
别忘了overflow-wrap: break-word防长单词溢出
即使用了pre-wrap，遇到超长不可折字符串（如Base64、无连字符URL），仍可能横向溢出。仅靠white-space不够，必须补一句：
<td style="white-space: pre-wrap; overflow-wrap: break-word;">https://very-long-url-with-no-hyphens...</td>
这个组合才是表格中安全渲染原始格式文本的最小闭环：保留空格与换行 + 允许软换行 + 强制断词保布局。复杂点在于，很多人试了pre-wrap发现还是溢出，却没意识到overflow-wrap才是最后一道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
