HTML中连续空格被压缩为单个空格是规范行为； 用于防断行的语义化空格；需保留多空格时优先用white-space: pre-wrap等CSS属性；<pre>兼具样式与语义价值。
为什么直接敲空格没用
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> 中的四个空格会被原样保留并正常折行。
立即学习“前端免费学习笔记（深入）”；
别忽略 <pre> 标签的语义价值
<pre> 不只是样式工具，它是语义化标签，表示「预格式化文本」。浏览器默认对其应用 white-space: pre，且通常配等宽字体。如果你的内容本就是日志、代码、ASCII 图，用 <pre> 比纯 CSS 更准确：
<pre>function hello() {<br> console.log("world");</pre>
这里缩进、空格、换行全部按源码呈现，且语义上告诉开发者/辅助技术：“这段内容的格式是有意义的”。强行用 div + white-space 替代，会丢失这层含义。
真正难的不是让空格显示出来，而是判断这个空格是否属于内容逻辑的一部分——是排版需求，还是语义需求，还是纯视觉hack。选错方案，后期改起来比加十个 还累。
