html中普通空格不显示是因浏览器默认“空白折叠”；可用 逐个替换、white-space: pre-wrap css属性（推荐）或标签解决，但后者需重置样式且语义不符。
为什么普通空格在HTML里不显示
HTML默认会把连续的空白字符（空格、制表符、换行）合并成一个空格，这是由浏览器解析HTML时的“空白折叠”规则决定的。所以写<p>hello world</p>，实际只显示一个空格。
用 实体逐个替换空格
最直接的方式是用 （non-breaking space）代替每个需要保留的空格：
<p>姓名： 张三</p>
注意： 不会换行，适合短距离对齐；但写多了难维护，也不支持动态生成多个空格（比如JS拼接时容易漏转义）。
用white-space CSS属性控制整体行为
更灵活的做法是给段落加样式，让浏览器停止折叠空白：
-
white-space: pre—— 保留所有空白和换行，但不自动换行（文本超出容器也不会折行） -
white-space: pre-wrap—— 保留空白和换行，同时允许自动换行（推荐日常使用） -
white-space: pre-line—— 合并空格但保留换行（不适合纯空格场景）
示例：
<p style="white-space: pre-wrap">地址： 北京市朝阳区xxx路123号</p>
用<pre class="brush:php;toolbar:false;"></pre>标签包裹但需注意样式污染
<pre class="brush:php;toolbar:false;"></pre>默认启用white-space: pre，能原样显示空格和缩进，但它自带等宽字体和上下外边距，容易破坏排版一致性：
- 必须重置
font-family、margin、line-height等样式才能融入普通段落流 - 语义上
<pre class="brush:php;toolbar:false;"></pre>表示“预格式化文本”，用于代码或日志更合适，纯内容对齐建议优先用CSS方案
真正要保留空格又不想改语义，white-space: pre-wrap + 普通<p></p>是最稳妥的选择。别忘了测试不同浏览器对pre-wrap的支持——IE9+都OK，但旧Android WebView可能有细微差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
