HTML5对空格的处理遵循默认合并规则，普通输入法输入的多个连续空格在页面渲染时会被合并为一个，这在富文本编辑场景中常常导致排版不符合预期，需要采用对应的方法来实现空格的正常输入和保留。
HTML5空格的基本特性
HTML5中，浏览器默认会将连续的空白字符（包括空格、制表符、换行符）合并为一个空格显示，这是HTML的默认排版规则。如果直接在富文本编辑器中按空格键输入多个空格，最终保存或渲染时只会保留一个，无法满足特殊的排版需求。
常见的空格相关实体字符有以下几种：
：不换行空格，是最常用的空格实体，宽度和当前字体下的普通空格一致，不会被浏览器合并 ：半角空格，宽度约为普通空格的一半 ：全角空格，宽度和一个汉字的宽度一致
富文本编辑器中输入空格的常用方法
方法一：使用HTML空格实体字符
直接在富文本编辑器的源码模式下插入对应的空格实体，就可以保留多个空格。比如在需要两个空格的位置插入两个 ，渲染时就会显示两个连续的空格。
以下是简单的演示代码，模拟在富文本内容中插入空格：
<!-- 富文本内容示例 -->
<div class="rich-text-content">
这是一段测试文本 这里有两个连续空格 这里有三个连续空格
</div>
方法二：通过CSS设置空白处理方式
可以给富文本内容的容器设置white-space样式，改变浏览器对空格的默认合并规则，这样在编辑器中输入的普通空格也会被保留。
常用的white-space属性值：
| 属性值 | 说明 |
|---|---|
| pre | 保留所有空格和换行，不会自动换行 |
| pre-wrap | 保留所有空格和换行，会自动换行 |
| pre-line | 合并连续空格，但保留换行 |
对应的CSS代码示例：
/* 富文本容器样式 */
.rich-text-container {
white-space: pre-wrap;
}
方法三：调整富文本编辑器的配置
大部分成熟的富文本编辑器都提供了空格处理的配置项，比如UEditor、TinyMCE等，可以在初始化时设置保留空格的相关参数。
以UEditor为例，初始化时设置保留空格的配置：
// UEditor初始化配置
UE.getEditor('editorContainer', {
// 保留空格和换行
retainOnlyLabelPasted: false,
// 开启空格保留模式
keepBlank: true
});
不同场景下的方法选择
如果是静态的富文本内容，优先选择使用 实体字符，兼容性好且不需要额外样式。如果是需要用户自由输入空格的动态编辑场景，建议结合CSS的white-space: pre-wrap和编辑器配置一起使用，既保证用户输入的空格能保留，又不会出现排版溢出问题。
需要注意，如果富文本内容需要导出为纯文本，使用 实体的空格在导出时会被转为普通空格，而通过CSS保留的空格在导出时可能需要额外处理，开发者可以根据实际需求选择对应的方案。