white-space: pre-wrap 是最实用的通用方案，它保留所有空格、制表符和换行符，同时允许软换行，避免溢出容器，适用于带缩进的 JSON/YAML、用户代码片段等场景。
white-space: pre-wrap 是最实用的通用方案
想让一段文本里所有空格、制表符、换行都原样显示，同时又不破坏响应式布局，white-space: pre-wrap 是当前最平衡的选择。它不像 pre 那样强制禁用自动换行，也不像 pre-line 那样合并空格——它真正做到了“保留原始空白 + 允许软换行”。
常见错误现象：white-space: pre 用在长日志或 JSON 字段上，导致表格横向溢出、移动端出现滚动条；white-space: normal（默认）下缩进全消失，用户输入的对齐结构完全坍塌。
- 适用场景：后端返回带缩进的 YAML/JSON、用户粘贴的代码片段、诗歌排版、带空格对齐的 ASCII 表格
- 必须搭配
overflow-wrap: break-word使用，否则遇到无连字符长字符串（如 Base64、URL）仍会撑破容器 - 若内容含缩进逻辑（如树形结构），建议额外加
font-family: monospace，避免空格宽度因字体变化而错位
用 只适合小范围精确控制
是唯一能保证“这里就一个不可折叠空格”的 HTML 实体，但它不是万能补丁。它不认换行，所有 都挤在同一行；大量堆砌会让 HTML 源码难以阅读，也违背语义化原则。
常见错误现象：在 Vue/React 模板中直接写 ，但父组件用的是 textContent 而非 v-html 或 dangerouslySetInnerHTML → 浏览器只显示字面量 ，不解析为真实空格。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 静态文本中，控制在 1–4 个以内；超过建议换用 CSS 方案
- 中英文混排时，
- 在 JSX 或 Vue 模板中，需写成
{' '}或用v-html渲染，不能直接当字符串插值
<pre> 不是“加空格工具”，而是预格式化语义容器
<pre> 的本质是启用 white-space: pre 并附带等宽字体和默认外边距。它适合代码块、ASCII 图这类需要像素级复刻源码的场景，但强行套在普通段落或表格单元格里，会引入样式干扰。
常见错误现象：把 <td><pre>name age</pre></td> 当作“让表格空格不折叠”的捷径 → <pre> 被浏览器自动闭合（HTML 规范禁止 <pre> 嵌套在 <td> 内），实际渲染异常；且等宽字体+上下 margin 会破坏表格流式对齐。
- 若只是想保留空格，用
<div style="white-space: pre;">更干净，可自由重置字体和间距 -
<pre>默认使用monospace，改字体需显式声明font-family，否则可能 fallback 到系统默认等宽字体（如 Courier New） - 它不能解决属性值里的空格问题（例如
<div class="a b">中的空格），那是 HTML 解析阶段的事，CSS 无法干预
表格单元格里保留空格要避开两个典型陷阱
表格单元格（<td>）默认 white-space: normal，所有空格照例被折叠。很多人试了 或 pre-wrap 还是没效果，往往卡在两个隐蔽点上。
常见错误现象：给 <td> 加了 white-space: pre-wrap，但表格用了 border-collapse: collapse → 相邻单元格的 padding 和 border 重叠，视觉上“吃掉”了开头空格；或者单元格内容本身是内联元素（如 <span>），未设置 display: inline-block 就直接加 white-space，导致行为不可控。
- 调试时临时加
border: 1px solid red看清真实边界，确认空格是否真的被渲染出来 - 避免用全角空格（U+3000）替代，它属于汉字编码范畴，不同字体下宽度差异大，移动端尤其容易错位
- 如果表格有固定列宽，
pre-wrap可能导致单元格高度突增，必要时加max-height和overflow: hidden控制
真正容易被忽略的是：空格能否显示，不只是“用了什么标签或属性”，更取决于它所处的上下文——是静态 HTML 还是动态插入？是否嵌套在限制性容器（如 <p>、<table>）里？有没有其他 CSS（比如 text-transform 或 letter-spacing）意外干扰了空白渲染逻辑。
