浏览器默认压缩连续空格为一个，是html规范的空白折叠行为；需用 、white-space:pre-wrap或标签显式保留多个空格。
浏览器默认把连续空格压缩成一个，这不是 bug，是 HTML 规范行为；要显示多个空格，必须显式干预——要么用 ，要么改 white-space，要么套 <pre class="brush:php;toolbar:false;"></pre>。
为什么直接敲多个空格没用
HTML 解析器会执行“空白折叠”（whitespace collapsing）：所有连续的空格、制表符、换行符都被视作单个空格处理，仅在行内上下文中渲染为一个可见空格。比如写 <p>hello<space><space><space>world</space></space></space></p>，最终只显示 hello world。
- 这个规则适用于所有普通文本节点，和是否用了 CSS 无关
<div> 之间换行产生的空格也受此影响，但可能表现为 inline-block 元素间的 4px 间隙（字体大小相关） <li>不是编码或字体问题，重装浏览器也没用</li> <h3>用 <code>替换空格最简单直接每个
- 想显示 3 个空格？写
<p>hello world</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 注意：
- 不适合动态内容：JS 拼接时若用
'a' + ' '.repeat(3) + 'b'，得确保插入的是innerHTML，textContent会原样显示字符串，不解析实体
white-space: pre-wrap是最灵活的 CSS 方案给容器设
white-space: pre-wrap，就能保留源码里的所有空格和换行，同时允许自动换行——日常排版推荐这个值。-
pre：保留空格和换行，但不换行，超宽内容会溢出容器 -
pre-line：合并连续空格，只保留换行，效果接近普通段落 - 设了
pre-wrap后，<span></span>内的换行也会被保留，可能意外破坏内联布局，需检查子元素 display 类型 - 别对整个页面根元素设这个，会影响按钮文字、导航栏等依赖默认空白处理的组件
<pre class="brush:php;toolbar:false;"></pre>标签适合代码或固定格式文本<pre class="brush:php;toolbar:false;"></pre>本质就是带white-space: pre的块级元素，还附带默认等宽字体和 margin，适合展示日志、JSON、缩进结构化文本。- 写
<pre class="brush:php;toolbar:false;"> hello world</pre>，空格和前面的缩进全保留 - 如果不需要等宽字体，得额外加
font-family: inherit覆盖默认样式 - 不要滥用：
<pre class="brush:php;toolbar:false;"></pre>是语义化标签，表示“预格式化文本”，用在普通段落里违反语义 - 响应式场景下，
<pre class="brush:php;toolbar:false;"></pre>容易横向溢出，建议配合overflow-x: auto
真正容易被忽略的是：空格问题常混在动态渲染流程里——比如后端返回带空格的字符串，前端用
textContent插入，结果空格全失效；或者 Vue/React 中绑定文本时没意识到模板编译已压缩了源码空格。这时候光调 CSS 没用，得从前端插入方式或服务端输出格式源头处理。- 想显示 3 个空格？写
