HTML中连续空格被合并是规范定义的空白折叠行为；需用 实体或white-space: pre-wrap等CSS属性保留，<pre>标签适用于预格式化文本。
HTML中连续空格被合并的默认行为
浏览器默认会把 HTML 文本中的多个连续空格、换行、制表符压缩成单个空格，这是 HTML 规范定义的“空白字符折叠”行为。所以直接写 或者敲三个空格，在页面上只显示一个空格。
用 手动替换空格
最直接的方式是把每个需要保留的空格替换成 （non-breaking space）。它不会被折叠，也不会换行。
适用场景：内容固定、空格数量少且可控，比如排版姓名缩写、单位符号（如“kg · m/s²”）。
注意点：
立即学习“前端免费学习笔记（深入）”；
-
- 大量使用会让 HTML 可读性变差，也不利于后期维护
- 不能解决换行或缩进对齐需求
用 white-space CSS 属性控制空白处理
更通用的做法是用 CSS 的 white-space 属性改变元素内空白字符的渲染方式。常用值有：
-
white-space: pre;—— 像<pre>一样保留空格和换行，但不自动换行（文本超出容器会溢出） -
white-space: pre-wrap;—— 保留空格和换行，同时允许自动换行（最常用） -
white-space: pre-line;—— 合并连续空格，但保留换行符
示例：
<div style="white-space: pre-wrap;">
这里 有 四个空格
</div>
渲染后，“这里”和“有”之间会显示四个空格，“有”和“四个空格”之间也是四个空格。
什么时候该用 <pre> 标签
<pre> 标签默认等价于 white-space: pre;，适合展示代码块、日志、ASCII 图等需要严格保留格式的内容。
但要注意：
-
<pre>通常自带上下外边距和等宽字体，可能影响整体样式，建议用 CSS 覆盖font-family和margin - 如果内容来自用户输入或 CMS，需防范 XSS，
<pre>不会自动转义 HTML，得先做textContent或innerText处理 - 移动端小屏幕下，长行内容容易横向溢出，最好配合
overflow-x: auto;
真正要原样输出连续空格时，核心就两条路：实体硬编码或 CSS 控制。选哪个，取决于内容是否动态、是否需换行、是否要兼容旧浏览器——pre-wrap 在 IE9+ 都支持，基本可放心用。
