HTML中连续空格被压缩为一个空格是规范规定的空白折叠行为；可用 实体、标签或white-space CSS属性（如pre-wrap）解决。

HTML里空格被合并是默认行为

浏览器渲染HTML时，会把连续的空白字符（空格、制表符、换行）压缩成单个空格，这是HTML规范定义的“空白折叠”规则。所以写   或直接敲多个空格，页面上都只显示一个空格。

用 手动替换空格最直接

适用于少量、固定位置的空格保留，比如缩进、对齐字段名等场景。每个 会被当作一个不可断行的空格渲染：

<p>姓名：<span>    </span>张三</p>

•  是HTML实体，不是空格字符，不会被折叠
• 不能用在
  外的纯文本中自动生效——必须显式写出
• 大量空格时写起来累，也不利于维护和国际化

用

标签包裹适合整段保留格式

会禁用空白折叠，并保留换行和空格，常用于代码块、日志、ASCII图等：

<pre class="brush:php;toolbar:false;">  key:    value  
    list: [a, b, c]

• 注意：默认使用等宽字体，且有上下外边距，可能影响排版
• 可通过CSS重置：pre { font-family: inherit; margin: 0; white-space: pre; }
• white-space: pre也能达到类似效果，但
  语义更明确

white-space CSS属性最灵活

这是控制空白处理的核心方案，支持多种值，常用组合：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• white-space: pre：保留空格和换行，不自动换行（文字超出容器不折行）
• white-space: pre-wrap：保留空格和换行，但允许长单词/文本在必要时折行（推荐日常使用）
• white-space: pre-line：合并空格，但保留换行（适合带换行但不care空格数的场景）

用法示例：

<p style="white-space: pre-wrap">  这里   有    多个     空格</p>

注意：white-space对内联元素（如）也有效，但需确保它不是被父元素的white-space覆盖。

真正容易被忽略的是继承关系——父容器设了white-space: nowrap，子元素即使写了pre-wrap也可能失效；调试时建议直接在目标元素上检查计算后的white-space值。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！