HTML默认合并连续空格，可用 实体、white-space CSS属性或 / /​等排版空格实现精准控制，各适用于不同场景。

HTML默认会合并连续空格

HTML解析器天生会把多个连续空格、制表符、换行符压缩成一个空格，这是规范行为，不是bug。所以直接写   或敲三下空格键，在页面上都只显示一个空格。

用 实体逐个替换空格

最直接的办法是用 （non-breaking space）代替普通空格。它不会被合并，也不会换行。

例如想显示“a  b”（中间两个空格），得写：a  b。注意： 不支持缩写，不能写成&nbsps;或&nbsp （带空格）——后者会被当成普通空格处理。

适用场景：少量、固定位置的空格控制，比如对齐表单标签、补位文字间距。

用white-space CSS属性批量控制

更灵活的方式是用CSS的white-space属性改变元素内空白符的渲染规则：

• white-space: pre —— 保留所有空白符和换行，但不自动换行（类似
  ）
• white-space: pre-wrap —— 保留空白符和换行，且允许自动换行（最常用）
• white-space: pre-line —— 合并连续空格，但保留换行

示例：

hello world

会原样显示4个空格。

DeepBI DHTML 页面生成器

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

下载

注意：该样式会影响整个元素内的所有空白行为，包括换行符；如果容器宽度受限，pre可能造成横向溢出，pre-wrap更安全。

用 、 等排版空格实体

需要语义化或固定宽度空格时，可用这些HTML字符实体：

•   ≈ 半个中文字符宽（约0.5em）
•   ≈ 一个中文字符宽（约1em）
•   ≈ 1/6em，适合微调

它们不受white-space影响，也不依赖字体，但属于“字符”，会被当作内容参与选中、复制、屏幕阅读器朗读——这点常被忽略。

比如写姓名： 张三，比硬塞    更语义清晰，也更容易维护。

真正麻烦的是混合场景：既要保留缩进又要响应式换行，这时pre-wrap + text-indent或margin-left往往比堆砌 更可控。

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