浏览器压缩连续空白是HTML规范行为；需用 、<pre>或white-space CSS属性实现真实空格效果，其中white-space:pre-wrap配合textContent最安全通用。

浏览器默认会把连续空格、换行、制表符全部压缩成一个空格，这不是 bug，是 HTML 规范行为；想让多个空格“真生效”，得用语义或样式层的手段，而不是硬敲空格。

用   插入不可折行空格

这是最直接的 HTML 实体方案，每个   渲染为一个固定宽度、不被合并、也不在行尾断开的空格。

• 适合防止“第 1 名”被拆成两行，“Mr. Smith”中间不断开
• 要 3 个空格就得写 3 个  ，不能缩写
• 别用它缩进整段文字——  是内容级字符，不是排版工具；语义错乱，响应式下还容易溢出
• 和普通空格不同：  不会被 white-space: normal 吞掉，但也不会自动换行

用 <pre> 保留所有空白与换行

<pre> 告诉浏览器：“照原样渲染里面的空格、制表符、换行，一个都别动”。

• 典型场景：代码块、日志输出、ASCII 艺术、带缩进的诗歌
• 默认用等宽字体，且自带上下 margin；若要复用样式，建议重置：pre { font-family: inherit; white-space: pre-wrap; margin: 0; }
• 别把它塞进按钮、标题或内联文本里——破坏语义，影响 SEO 和屏幕阅读器
• <pre><code> 是黄金组合，但单用 <pre> 已足够保留空白

用 CSS white-space 属性控制空白行为

比起堆   或滥用 <pre>，用 CSS 控制更干净、可维护、响应式友好。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• white-space: pre-wrap：最常用；保留空格和换行，同时允许自动换行（适合地址、用户输入文本）
• white-space: pre-line：合并多余空格，但保留换行符（适合从 API 拿到含 \n 的富文本）
• white-space: nowrap：合并空格 + 强制单行（慎用！它会让“图标 文字”粘连，因空格也被合并）
• 别给整页 body 设 pre——性能无问题，但可访问性下降，屏幕阅读器可能逐字读空格

textarea 输入后插入 DOM 时的空格丢失

用户在 <textarea> 里敲了 4 个空格 + 回车，用 JS 取 value 再赋给 innerHTML，结果全变成一个空格——因为 HTML 渲染引擎又折叠了一遍。

• 错误做法：el.innerHTML = textarea.value
• 正确做法：转义换行符为 <br>，或用 white-space: pre-wrap + textContent（保留原始空白但不执行 HTML 解析）
• 如果必须用 innerHTML 且需保留所有空白，先替换：

  textarea.value.replace(/\n/g, '<br>').replace(/ /g, ' ')

  ，但注意这会把制表符、全角空格等漏掉
• 更稳妥的是：设容器 white-space: pre-wrap，然后用 textContent 赋值——既安全，又无需手动转义

真正难的不是“怎么加空格”，而是判断该用内容实体、预格式化标签，还是样式控制；多数时候，white-space: pre-wrap 配合 textContent 就能覆盖 80% 场景，且不留隐患。