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