浏览器折叠空格是html规范要求，非bug；可用 插入不可折叠空格、white-space css属性控制文本空白处理、标签原样渲染格式化内容。
浏览器默认会折叠空格，这不是 bug 是设计
HTML 规范要求浏览器把连续空白字符（空格、制表符、换行）压缩成单个空格，这是为了语义化排版和流式布局。所以你在代码里敲 10 个空格，<p>hello world</p> 渲染出来还是 hello world。这不是渲染异常，而是标准行为。
用 插入不可折叠空格
这是最轻量、最可控的方案，适合少量、确定位置的空格补充：
-
- 多个空格就写多个：例如
<p>A B</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>显示为 “A B”（三个空格） - 它不依赖 CSS，兼容所有浏览器，包括古早版本
- 但别滥用——写 20 个
用 white-space CSS 属性控制整块文本
当你要保留一段文本中所有空格+换行，又不想改字体或语义结构，white-space 是首选：
-
white-space: pre：完全保留空格和换行，但不自动折行（长文本可能溢出容器） -
white-space: pre-wrap：保留空格和换行，同时允许自动折行——日常使用推荐这个 -
white-space: pre-line：合并连续空格，只保留换行——适合清理杂乱空格但要留段落结构 - 必须作用于具体元素，比如
<p style="white-space: pre-wrap"> a b\n c</p>
用 <pre class="brush:php;toolbar:false;"></pre> 标签包裹格式化内容
这是语义最明确的方式，适用于代码、日志、ASCII 图等需要“原样输出”的场景：
-
<pre class="brush:php;toolbar:false;"></pre>内所有空格、制表符、换行都会原样渲染 - 默认用等宽字体，可通过 CSS 覆盖：
<pre class="brush:php;toolbar:false;" style="font-family: inherit"></pre> - 注意：它是个块级元素，自带上下 margin，且会把缩进空格也当成内容——编辑时要小心源码缩进干扰显示
- 不适合嵌入行内文本，比如
<span><pre class="brush:php;toolbar:false;">xxx</pre></span>会破坏流式布局
真正容易被忽略的是：空格问题从来不是孤立的。你选 还是 white-space，取决于你是在补一个词间距，还是在展示一段有结构的文本。混用会导致样式冲突，比如给含 的元素设 white-space: normal，空格照样被折叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
