html中连续空格被压缩为单个空格是规范行为； 用于防断行的语义化空格；需保留多空格时优先用white-space: pre-wrap等css属性；兼具样式与语义价值。
为什么直接敲空格没用
HTML 解析器默认会把连续的空白字符（空格、制表符、换行）压缩成单个空格，这是规范行为，不是 bug。你在源码里写 This works，浏览器渲染出来还是 This works。这不是显示异常，是解析阶段就完成了折叠。
适合什么场景
实体 表示 non-breaking space，它不会被折叠，也不会在该位置换行。但它本质是「字符」，不是「样式控制」，所以：
- 适合固定位置的微调，比如防止“Mr. Smith”在换行时断成两行
- 不推荐堆砌多个
- 注意：
white-space 是更可控的选择
真正需要保留多空格时，优先用 CSS 的 white-space 属性，它提供明确的行为语义：
-
white-space: pre—— 完全保留源码空格和换行，但不自动换行（长文本会横向溢出） -
white-space: pre-wrap—— 保留空格和换行，同时允许自动换行（最常用，适合代码片段、地址、诗歌） -
white-space: pre-line—— 合并连续空格，但保留换行符（适合用户输入的富文本预览）
例如：<p style="white-space: pre-wrap">姓名： 张三</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> 中的四个空格会被原样保留并正常折行。
别忽略 <pre class="brush:php;toolbar:false;"></pre> 标签的语义价值
<pre class="brush:php;toolbar:false;"></pre> 不只是样式工具，它是语义化标签，表示「预格式化文本」。浏览器默认对其应用 white-space: pre，且通常配等宽字体。如果你的内容本就是日志、代码、ASCII 图，用 <pre class="brush:php;toolbar:false;"></pre> 比纯 CSS 更准确：
<pre class="brush:php;toolbar:false;">function hello() {<br> console.log("world");</pre>
这里缩进、空格、换行全部按源码呈现，且语义上告诉开发者/辅助技术：“这段内容的格式是有意义的”。强行用 div + white-space 替代，会丢失这层含义。
真正难的不是让空格显示出来，而是判断这个空格是否属于内容逻辑的一部分——是排版需求，还是语义需求，还是纯视觉hack。选错方案，后期改起来比加十个 还累。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
