HTML默认合并连续空白字符，可通过①实体 、②标签、③CSS white-space: pre、④white-space: pre-wrap配合宽度控制、⑤tab-size与制表符组合实现空格原样显示且不换行。
如果您在HTML5中输入多个空格，但网页显示时只呈现为一个空格，则是因为HTML默认会合并连续空白字符（包括空格、制表符、换行符）。以下是实现空格原样显示且不换行的多种方法：
一、使用 实体字符
HTML中可使用不间断空格字符 来显式插入空格，每个 代表一个不可折叠的空格，浏览器不会将其合并或省略。
1、在需要保留空格的位置，将空格替换为 。
2、例如： 姓名： 张三 立即学习“前端免费学习笔记（深入）”；
3、注意： 不支持自动换行，配合CSS white-space设置可进一步控制排版行为。
二、使用
标签默认保留所有空白字符和换行，并按源码格式渲染。若仅需保留空格而不换行，需额外用CSS限制其行为。
1、将含空格的文本放入标签内，如：abc def
2、为该添加内联样式：style="white-space: pre; overflow-x: auto;"。
3、若需禁用换行，追加white-space: pre;并配合width与overflow-x: auto;防止溢出。
三、使用CSS white-space: pre
该值使元素内的空白序列（空格、换行、制表符）完全按源码保留，且不自动换行，适合纯文本块的精确空格控制。
1、为需要保留空格的元素添加class，例如：item1 item2。
2、在CSS中定义：.preserve-space { white-space: pre; }。
3、确保该元素为内联元素（如）时，若需宽度自适应，可添加display: inline-block;避免布局异常。
四、使用CSS white-space: pre-wrap
该值保留所有空白字符，同时允许文本在必要时换行；若配合固定宽度与禁止换行的额外约束，可实现“保留空格+强制不换行”效果。
1、为容器元素设置white-space: pre-wrap;。
2、添加overflow: hidden;和text-overflow: clip;防止溢出可见。
3、关键步骤：添加width: fit-content;或指定固定width，并设置white-space: pre;覆盖优先级——实际生效需确保pre的权重高于pre-wrap，可通过更具体的选择器或!important实现。
五、使用tab-size配合 制表符（Tab）
当需对齐多组文本（如表格状结构），可用制表符 替代多个空格，并通过CSS控制其宽度，提升可维护性。
1、在HTML中插入制表符：左 右（ 为Tab字符实体）。
2、为该元素设置tab-size: 4;（单位为字符宽度），例如：style="tab-size: 8;"。
3、必须同时设置white-space: pre;或pre-wrap;，否则制表符会被当作普通空白而合并——缺少white-space声明时， 将被忽略。
