html默认合并多个空格，可用 实体保留单个空格，或用white-space:pre-wrap等css属性控制空白行为，pre标签适合严格格式文本。
HTML默认会合并多个空格
浏览器渲染时，连续的空格、制表符、换行符都会被当作一个空格处理。所以写 或者直接敲三个空格，在页面上只显示一个。
用 实体逐个替换空格
最直接的办法是把每个需要保留的空格替换成 （non-breaking space）。它不会被合并，也不会换行。
比如想显示 “a b”（a和b之间三个空格），得写成：<p>a b</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 适合少量、固定位置的空格，比如排版标题中的间隔
- 写多了很累，也不利于维护
-
用white-space CSS属性控制空白符行为
更灵活的方式是用 CSS 的 white-space 属性，让整块文本按需保留空白：
<p style="white-space: pre">a b</p>
常用值说明：
-
pre：完全按源码换行+空格，类似<pre class="brush:php;toolbar:false;"></pre>标签 -
pre-wrap：保留空格和换行，但允许自动换行（推荐日常使用） -
pre-line：合并空格，但保留换行 - 注意：这些值会影响换行逻辑，如果容器窄，
pre可能导致横向溢出
用<pre class="brush:php;toolbar:false;"></pre>标签包裹纯文本内容
如果整段内容就是代码、日志、对齐文本这类需要严格保留格式的，直接套 <pre class="brush:php;toolbar:false;"></pre> 最省事：
<pre class="brush:php;toolbar:false;">ID Name Age 001 Alice 28
-
<pre class="brush:php;toolbar:false;"></pre>默认启用white-space: pre，还附带等宽字体 - 如果不想用等宽字体，可以加 CSS 覆盖：
font-family: inherit - 别滥用——它会禁用普通段落的首行缩进、两端对齐等排版特性
还是 white-space，取决于你是在微调个别间隙，还是批量控制一段文本的空白逻辑。后者更容易失控，尤其在响应式布局里，pre-wrap 比 pre 更稳妥。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
