HTML5中多个空格被合并为一个，可用 、<pre>标签、CSS white-space属性、margin/padding或Unicode空格解决： 适合少量空格；<pre>保留所有空白和换行；white-space: pre/pre-wrap控制空格与换行；margin/padding用于布局对齐；Unicode空格提供不同宽度且不合并。
如果您在HTML5中直接输入多个空格，浏览器默认会将其合并为一个空格，导致无法显示预期的空白效果。以下是实现插入多个空格及保留空格不换行的多种方法：
一、使用 实体字符
（不间断空格）是HTML中最基础的空格表示方式，每个 渲染为一个不可折叠的空格，适合少量空格插入。
1、在需要插入空格的位置，输入 ，例如：Hello World。
2、连续输入多个 可生成多个独立空格，如 对应三个空格。
立即学习“前端免费学习笔记（深入）”；
3、注意 不会因换行或缩进而被忽略，但无法通过CSS控制其宽度或对齐方式。
二、使用<pre>标签包裹文本
<pre>标签保留原始文本中的所有空格和换行符，适用于整段需严格格式化的内容。
1、将目标文本用<pre>与</pre>包裹，例如：<pre>Hello World</pre>。
2、确保HTML源码中空格数量与预期一致，编辑器中按空格键输入即可。
3、该方法会强制等宽字体显示，且默认保留换行，需配合CSS重置字体和white-space属性。
三、设置CSS white-space属性为pre或pre-wrap
通过CSS控制元素内空白符的处理方式，使普通空格不被合并，同时保持换行行为可控。
1、为容器元素添加style="white-space: pre;"，例如：<div style="white-space: pre;">Hello World</div>。
2、若需允许换行但保留空格，改用white-space: pre-wrap;，例如：<span style="white-space: pre-wrap;">A B</span>。
3、white-space: pre仅保留空格和换行，不自动折行；pre-wrap则在必要时折行且保留空格。
四、使用margin或padding模拟空格
当空格用于布局对齐而非文本内容时，可通过内边距或外边距精确控制间距，避免语义混乱。
1、为相邻内联元素（如<span>）设置margin-right，例如：<span style="margin-right: 20px;">Hello</span><span>World</span>。
2、对单个字符或单词使用padding-left/right，例如：<span style="padding-left: 16px;">World</span>。
3、此法完全脱离文本空格语义，适合UI对齐场景，但不可用于纯文本格式化需求。
五、使用Unicode空格字符
HTML支持多种Unicode空格符号，如 （en空格）、 （em空格）、 （窄空格），宽度各异且不被合并。
1、在HTML中直接输入Unicode字符，例如：Hello World（其中 为em空格，约等于两个字符宽）。
2、可使用HTML实体形式，如 对应 ， 对应 。
3、不同Unicode空格在各浏览器中渲染一致，但需注意编辑器编码必须为UTF-8。
