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