HTML中连续空格被折叠是规范行为；可用 插入不可断行空格、white-space CSS属性控制空白处理、<pre>标签保留预格式文本，三者适用场景不同，无万能解。

为什么直接敲多个空格没用

HTML 解析器默认执行「空白折叠」（whitespace collapsing），会把连续的空格、制表符、换行符全部压缩成单个空格。哪怕你在源码里写 hello<space><space><space><space>world，浏览器渲染出来仍是 hello world。这不是 bug，是规范行为——它让 HTML 源码可读性不被格式干扰，但代价是排版控制变弱。

用   插入不可断行空格

这是最轻量、兼容性最好的方案，适合段落内局部对齐或微调间距：

•   是 HTML 实体，每个对应一个「不可断行空格」，不会被折叠
• 要显示 3 个空格，就写    ；注意末尾分号 ; 不可省略
• 它本质是字符，所以能放在任何文本上下文里，比如 <p>左<span>   </span>右</p>
• 缺点：大量使用会让 HTML 源码臃肿，且无法响应式缩放（固定为一个字符宽度）

用 white-space CSS 属性整体控制

当需要保留整块文本的原始空格与换行（如代码片段、诗歌、ASCII 艺术），white-space 是更语义化的选择：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• white-space: pre —— 完全保留空格和换行，但不自动换行（文本超宽会溢出）
• white-space: pre-wrap —— 保留空格和换行，同时允许长行自动折行，日常最常用
• white-space: pre-line —— 合并连续空格，但保留换行（类似普通段落加换行支持）
• 必须作用于具体元素，例如：<div style="white-space: pre-wrap"> hello world </div>

用 <pre> 标签快速包裹预格式文本

<pre> 是语义明确的原生标签，等价于设置了 white-space: pre 并附带默认等宽字体和上下 margin：

立即学习“前端免费学习笔记（深入）”；

• 直接把含多空格的文本包进去：<pre>int main() {<br>  return 0;</pre>
• 它会保留所有空格、制表符、换行，适合展示代码、日志、表格化文本
• 缺点：默认样式可能破坏页面字体统一性，建议配合 CSS 重置字体：font-family: inherit;
• 不要滥用——仅用于「内容本身依赖格式」的场景，不是通用空格解决方案

真正容易被忽略的是：没有“万能解”。  灵活但琐碎，white-space 强大但影响整块渲染逻辑，<pre> 语义清晰却带样式包袱。选哪个，取决于你是在修一个词间距，还是在展示一段必须对齐的代码。