HTML默认合并连续空格和换行；可用 插入不间断空格；<pre>保留原始空白格式；CSS white-space属性（如pre-wrap）提供精细控制；语义化空白才用空格方案，否则优先用padding/margin。

HTML默认会合并连续空格和换行

浏览器渲染时，HTML会把多个空格、制表符、换行符全部压缩成一个空格——这是HTML规范行为，不是bug。所以写   或敲三下空格键，最终只显示一个空格。

用 手动插入不间断空格

这是最直接的方案，适合少量、确定位置的空格控制：

•  是HTML实体，代表“non-breaking space”，浏览器不会合并它，也不会换行断开
• 要显示4个空格，就得写    ，不能偷懒写　　（全角空格）——后者语义不同，宽度也不一致
• 注意：不要混用 和普通空格，比如hello  world中，两个 生效，但前后普通空格仍会被压缩

用<pre>保留原始格式

当需要整段保留缩进、空行、多空格（比如代码片段、ASCII图表），<pre>是最省事的选择：

html-to-pptx-converter

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

下载

• 它默认启用white-space: pre，等价于“原样输出所有空白字符”
• 字体自动变成等宽，适合代码；如需恢复常规字体，加CSS：pre { font-family: inherit; }
• 注意：<pre>会保留换行，如果源码里写了回车，页面就真换行——这在内联文本中往往不想要

用CSS的white-space属性精细控制

更灵活、可复用的方式，尤其适合动态内容或需要响应式处理的场景：

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

• white-space: pre-wrap：保留空格和换行，但允许自动换行（推荐大多数情况）
• white-space: pre-line：合并多余空格，但保留换行符（类似普通段落+换行）
• white-space: break-spaces：保留空格且允许在空格处换行（Chrome 83+，Firefox 73+，兼容性需检查）
• 使用时建议加类名而不是全局改p或span，避免影响其他文本样式

真正麻烦的不是“怎么让空格显示”，而是得想清楚：这里到底需不需要语义化的空白？如果只是对齐或视觉留白，用padding或margin更合理；只有当空格本身承载信息（如缩进结构、代码缩进、诗歌排版）时，才该动用 或white-space。