普通空格在html中不显示多个是因为浏览器默认将连续空白字符（空格、换行、制表符）合并为一个空格，这是html规范规定的空白折叠行为；需用 实体或white-space css属性（如pre-wrap）来保留多个空格，标签仅适用于预格式化文本场景。
为什么普通空格在HTML里不显示
HTML默认会把连续的空白字符（空格、换行、制表符）合并成一个空格，这是规范行为，不是bug。所以写<p>hello world</p>，页面只显示一个空格。
用 插入不可折行空格
这是最常用也最稳妥的方式，适合少量、确定位置的空格需求：
-
- 想显示三个空格？就写三个
<span>hello world</span> - 注意：不要混用
hello world中间那个普通空格会被吃掉
用white-space CSS控制整块区域的空白处理
当需要保留多处空格、缩进或换行时，用CSS比堆 更清晰：
-
white-space: pre：完全保留空格和换行，但不自动换行（文字超出容器也不折行） -
white-space: pre-wrap：推荐首选，保留空格和换行，同时允许自动换行 -
white-space: pre-line：合并连续空格，但保留换行符（类似普通段落，只是换行有意义） - 用法示例：
<pre class="brush:php;toolbar:false;"> hello world</pre>或<div style="white-space: pre-wrap"> hello world</div>
哪些场景容易踩坑
实际用的时候，这几个点最容易出问题：
- 在
<textarea></textarea>或<pre class="brush:php;toolbar:false;"></pre>里输入的空格天然保留，但一放进<p></p>或<div>就消失——别急着加<code>，先看是否该用white-space -
- 用
white-space: pre时，如果内容来自用户输入，要注意XSS风险——得先转义HTML特殊字符再渲染 - 某些老版本IE对
pre-wrap支持不完整，如果还要兼容IE8，得降级用pre+word-wrap: break-word
空格看着小，但涉及渲染逻辑、可访问性和维护成本，选 还是white-space得看具体上下文——前者是手术刀，后者是调节阀。
