HTML中连续空格被合并是规范行为，需用 、white-space CSS或<pre>标签实现多空格显示，其中pre-wrap最推荐；全角空格和letter-spacing不适用，关键在区分视觉对齐与语义空格需求。

浏览器默认会把连续空格合并成一个，这不是 bug，是 HTML 规范行为；要真正显示多个空格，必须绕过这个折叠机制。

用   替换每个空格

这是最直接、兼容性最好的方法，适合少量、位置固定的空格需求。

•   是不可断行空格实体，每个都会被渲染为一个独立空格，且不会被合并
• 比如想显示 "a b"（a 和 b 之间四个空格），就得写成 a    b
• 注意：  不能写在 HTML 标签属性值里作分隔符（如 <div class="a   b"> 会出错） <li>如果文档编码不是 UTF-8，<code>  可能显示为乱码，务必确认 <meta charset="UTF-8">

用 white-space CSS 属性整体控制

当需要保留一整段文本的原始空格和换行时，比堆   更干净、可维护。

• white-space: pre：完全保留所有空白符（空格、制表符、换行），且不自动换行 —— 行为类似 <pre>，但不强制等宽字体
• white-space: pre-wrap：推荐首选，保留空格和换行，同时允许内容在容器边界处正常折行
• white-space: pre-line：只保留换行符，合并连续空格为单个 —— 适合“换行重要、空格不重要”的场景
• 不要设在 <body> 或全局 p 上，否则影响所有段落；应加在具体容器上，例如 <div class="code-sample" style="white-space: pre-wrap">...</div>

用 <pre> 标签包裹文本

适用于代码块、ASCII 图、日志输出等需严格保持格式的场景。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载

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

• <pre> 内部所有空白（包括缩进、空行）原样渲染，无需改写空格
• 默认使用等宽字体，若要改字体，必须显式用 CSS 覆盖，例如 font-family: system-ui, sans-serif;
• 它是个块级元素，会自带上下外边距，可能破坏原有布局流，必要时用 margin: 0 重置
• 语义上表示“预格式化文本”，不适合用于普通段落中的局部空格调整

别踩这些坑

很多问题其实不是技术限制，而是对空格类型和作用域理解偏差导致的。

• 全角空格（中文输入法下的空格）虽能绕过折叠，但属于 Unicode 字符，语义混乱、可访问性差，不建议用于结构化内容
• letter-spacing 和 word-spacing 控制的是字符/词间距，不是插入空格，不能替代空白符保留逻辑
• 在 Vue/React 等框架中，JSX 里写多个空格仍会被编译器压缩，必须用 {"\u00A0\u00A0"} 或 white-space CSS
•   和普通空格在屏幕阅读器中读出来都只是“空格”，但连续多个   可能被读成“空格、空格、空格……”，影响可访问性

真正关键的判断点在于：你要保留的是“视觉对齐”还是“语义空格”。前者优先用 white-space: pre-wrap，后者才考虑   —— 混用或硬塞几十个   往往说明没想清楚需求本质。