html中连续空格只显示一个是浏览器默认行为，源于white-space:normal的规范定义；可通过 、white-space:pre-wrap或pre标签等方案绕过压缩并保留空白。
HTML里空格不显示？这是浏览器默认行为
浏览器会把连续的空白字符（空格、制表符、换行）压缩成单个空格，再忽略首尾空白。这不是bug，是HTML规范定义的渲染逻辑。所以直接写 或用CSS控制，本质是在绕过这个默认压缩。
用 手动插入不间断空格
适用于少量、确定位置的空格需求，比如“姓名： 张三”想留两个空位。
-
- 连续写多个
- 它会参与文字流布局，影响行高和换行点，嵌套在
<pre class="brush:php;toolbar:false;"></pre>里也照常生效（这点和<pre class="brush:php;toolbar:false;"></pre>自身的空格处理逻辑无关）
CSS的white-space属性控制整体空白处理
适合整块文本（如用户提交的评论、日志输出）需要原样显示缩进和换行。
-
white-space: pre：保留所有空白和换行，但不自动换行（文字超出容器会溢出） -
white-space: pre-wrap：推荐首选，保留空白和换行，同时允许自动折行 -
white-space: pre-line：合并连续空格为一个，但保留换行——适合“想让换行生效，但不care缩进”的场景 - 注意：该样式需作用于包裹文本的容器元素（如
<div> 或 <code><p></p>），不能只加在纯文本节点上JavaScript中处理字符串空格再塞回HTML
常见于后台返回带缩进的JSON、代码片段或用户富文本编辑后的内容。
- 不要直接用
.innerHTML = str，否则空格仍被压缩；先用str.replace(/\s/g, ' ')全部转义（但会把换行也变成 - 更稳妥的是：用
white-space: pre-wrap+.textContent设置内容，让浏览器自己按CSS规则解析原始空白 - 如果必须用
.innerHTML，且需保留换行，建议配合str.replace(/\n/g, '<br>').replace(/ /g, ' ')
——但要注意多次执行会重复转义，需加防护
空格显示问题从来不是孤立的，它总和内容来源（后端API、用户输入、静态HTML）、展示容器样式、是否需要复制友好等条件绑在一起。单独选一种方案容易踩坑，得先看清空格是从哪来的、要保哪些、舍哪些。
- 不要直接用
