html默认压缩连续空格为一个，属规范行为；可用white-space属性控制（如pre-wrap保留空白并换行）； 虽能强制空格但不宜滥用，优先用css方案实现对齐与排版。
HTML默认忽略连续空格的原因
浏览器渲染HTML时会把任意长度的空白字符（空格、制表符、换行）压缩成单个空格，这是HTML规范定义的行为，不是bug。所以写 或直接敲三个空格，最终都只显示一个空格。
用white-space CSS属性控制空格处理
这是最常用也最灵活的方式，通过修改元素的white-space值来改变空白字符的渲染逻辑：
-
white-space: pre：保留所有空白和换行，类似<pre class="brush:php;toolbar:false;"></pre>标签，但不等宽字体 -
white-space: pre-wrap：保留空白和换行，且允许自动换行（推荐日常使用） -
white-space: pre-line：合并连续空格，但保留换行符（换行生效，空格不生效）
示例：
<p style="white-space: pre-wrap">hello<span> </span>world</p>里面三个
会原样显示为三个空格；而纯文本hello world在pre-wrap下也会显示三个空格。
能用但别滥用
是不换行空格字符，它确实能强制显示一个空格，但它本质是字符而非空白控制机制：
- 每个
- 不能响应式缩放——比如在窄屏上，一串
white-space: pre-wrap配合overflow-wrap更可控 - 和普通空格混用时行为难预测，例如
text more中，前面空格被压缩，后面
需要对齐或排版时优先考虑CSS方案
如果目标是文字对齐（如表格内左对齐+固定间距）、代码片段缩进、或者协议字段分隔，不要靠堆 或<span></span>硬塞空格：
- 用
text-indent控制首行缩进 - 用
padding-left或margin-left替代左侧空格 - 用
display: inline-block+width做等宽占位 - 真要模拟终端/日志格式，直接上
<pre class="brush:php;toolbar:false;"><code></code>组合，语义和效果都更准确</pre>
连续空格是否“生效”，本质是你想解决什么问题——是调试时看原始空白？是排版对齐？还是数据字段分隔？选错手段会让后续维护变麻烦，尤其当内容来自API或用户输入时，white-space比手动插 可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
