HTML默认合并连续空白字符为一个空格； 是非断行空格，不会被合并或折行；推荐用CSS的white-space:pre-wrap等属性控制空格显示，而非滥用HTML实体。

HTML 本身没有“函数”概念，所谓“HTML 函数”通常是误称——你真正需要的，是用 CSS 或 JavaScript 处理空格显示问题。

为什么   和普通空格表现不同

HTML 会合并连续空白字符（空格、换行、制表符），只保留一个空格。这是规范行为，不是 bug。

•   是非断行空格实体，浏览器不会合并它，也不会在换行处断开
• 用多个   可以强制显示多个空格，但语义上不推荐用于排版布局
• 如果内容来自用户输入或数据库，直接插   容易引发 XSS 风险（未转义时）

用 white-space CSS 控制空格渲染

这是最常用、最可控的方式，适用于预格式化文本、代码块、日志输出等场景。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• white-space: pre：保留所有空白和换行，行为类似 <pre class="brush:php;toolbar:false;"></pre> 标签
• white-space: pre-wrap：保留空白，但允许自动换行（推荐多数场景）
• white-space: pre-line：合并空白，但保留换行符（适合带换行的纯文本）
• 避免用 white-space: nowrap 处理空格问题，它只禁用换行，不改变空白合并逻辑

JavaScript 中处理空格再插入 DOM 的风险点

若需动态处理（如把 4 个空格转成缩进），注意 DOM 插入方式直接影响渲染结果。

• 用 textContent 设置内容 → 空格会被合并，  会变成字面量  
• 用 innerHTML 设置内容 →   被解析为真实空格，但必须确保内容已转义（推荐用 DOMPurify 或手动替换 & <code>>）
• 正则替换示例：str.replace(/ {4}/g, '    ') —— 注意只匹配英文空格，不处理 \t 或全角空格

真正麻烦的从来不是怎么加空格，而是搞清空格该由谁控制：CSS 控制显示行为，JS 控制数据转换，HTML 实体只在极少数静态场景下直接手写。混用这三层，八成会遇到意料之外的折叠或转义问题。

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