HTML5中空格被合并是因空白字符处理规则，可用 、white-space:pre/pre-wrap、JS替换空格、<pre>标签或textarea空格可视化等方式保留。
如果您在HTML5页面中输入空格，但浏览器默认将其合并为单个空格或忽略首尾空格，则可能是由于HTML的空白字符处理规则所致。以下是保留输入空格的多种实现方式：
一、使用 实体插入不间断空格
HTML会将多个普通空格字符压缩为一个，而 （non-breaking space）是独立的字符实体，不会被折叠，适合在文本中手动插入固定空格。
1、在需要空格的位置，直接输入 代替空格键。
2、例如：<p>姓名： 张三</p> 将显示为“姓名： 张三”。
立即学习“前端免费学习笔记（深入）”；
3、注意： 不会随换行或缩进自动产生，必须显式书写，且不可通过用户输入框直接生成。
二、设置 CSS white-space 属性为 pre 或 pre-wrap
white-space 属性控制元素内空白字符的渲染行为，pre 保持所有空格与换行，pre-wrap 在保持空格的同时允许自动换行，适用于用户输入内容的展示容器。
1、为显示用户输入的 <div> 或 <pre> 添加样式：white-space: pre-wrap;。
2、若需严格保留缩进与换行，使用 white-space: pre;，此时文本将按源码格式渲染，不折行。
3、示例CSS：textarea + .output { white-space: pre-wrap; font-family: monospace; }。
三、对用户输入内容进行 HTML 转义后替换空格
当从 <input> 或 <textarea> 获取用户输入时，可借助JavaScript将普通空格转换为 ，再注入到目标元素中，从而在渲染时保留空格数量。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
1、获取用户输入值：const input = document.getElementById('myInput').value;
2、将每个空格替换为 ：const escaped = input.replace(/ /g, ' ');
3、将结果写入目标元素：document.getElementById('display').innerHTML = escaped;
四、使用 <pre> 标签包裹输入内容
<pre> 元素默认具有 white-space: pre; 行为，天然保留所有空格、制表符和换行符，适合展示原始格式文本。
1、将用户输入内容动态插入到 <pre> 标签内，而非 <p> 或 <div>。
2、确保输入内容已做HTML转义（如将 < 替换为 ），避免XSS风险。
3、若需样式自定义，可为 <pre> 添加CSS：pre { margin: 0; padding: 0; font-size: 1em; }。
五、在 textarea 中启用空格可见性辅助（仅开发调试用）
textarea 本身不渲染空格视觉效果，但可通过CSS伪元素或JavaScript模拟空格符号（如·），便于确认空格是否被正确录入，该方式不影响实际值，仅用于界面反馈。
1、为 textarea 添加类名：class="show-spaces"。
2、使用CSS + JavaScript组合：监听输入事件，将空格替换为 · 并显示在只读预览区。
3、关键提示：此方法不改变实际 value 值，仅用于可视化验证。
