用 <pre> 标签包裹代码可保留空格和换行；HTML 默认压缩空白符，<pre> 专为预格式化文本设计，仅 <code> 或 <span> 无法阻止空白符被压缩。
用 <pre> 标签包裹代码即可保留空格和换行
HTML 默认会把连续空格、制表符、换行都压缩成一个空格，这是渲染引擎的默认行为。要原样显示代码里的缩进、对齐和空行，必须用 <pre> —— 它是专门为“预格式化文本”设计的语义标签。
常见错误是只加 <code> 或 <span>，这些标签不改变空白符处理逻辑，空格照样被吃掉。
-
<pre><code>.../pre>是最佳组合：语义清晰（<pre>控制空白，<code>表明内容为代码） - 直接写
<pre> let x = 1; </pre>也能保留空格，但缺少语义，不利于可访问性和 SEO - 如果内容来自用户输入或 CMS，注意
<pre>不会自动转义 HTML 特殊字符，需提前对<、>、&做 HTML 实体编码，否则可能被解析为标签
white-space CSS 属性能替代 <pre> 吗
可以，但要小心选值。CSS 的 white-space 属性控制空白符如何处理，其中只有 pre、pre-wrap、pre-line 能保留空格；但它们行为有关键差异：
-
white-space: pre;：完全等价于<pre>，保留空格、换行、不自动折行（长行会撑宽容器） -
white-space: pre-wrap;：保留空格和换行，且允许在空格/连字符处折行（更友好，推荐用于响应式场景） -
white-space: pre-line;：合并连续空格，但保留换行符（不适合代码，适合普通文本排版） - 别用
nowrap或默认值，它们都会丢空格
示例：<div style="white-space: pre-wrap;"> function foo() {<br> return 42;<br>} </div> —— 注意这里仍需手动把换行写成 <br>，否则纯文本换行在 HTML 中无效（除非用 \n + JS 插入或服务端预渲染）
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
在 Markdown 或模板引擎里怎么保留空格
很多工具会把缩进当段落或列表处理，导致空格丢失。关键看输出是否生成了 <pre> 或设置了正确的 white-space。
- GitHub Flavored Markdown：用缩进 4 空格或围栏代码块
```js→ 渲染为<pre><code>，空格安全 - Vue / React 模板中，直接写
{` if (x) {`}不会保留缩进，因为 JSX/模板编译器按普通文本处理；应改用<pre><code>{` if (x) {`}</code></pre> - 服务端模板（如 EJS、Jinja）：确保变量输出未开启自动 trim，例如 EJS 的
<%== %>（非转义）配合<pre>才可靠
为什么用了 <pre> 还是没保留空格
大概率是空格本身被编辑器或构建工具“优化”掉了。HTML 空格是否生效，取决于它是否真实存在于最终发送给浏览器的 HTML 字节流中。
- 编辑器保存时启用了 “trim trailing whitespace”，删掉了行尾空格（而
<pre>需要的是行尾空格来对齐） - Webpack/Vite 的 HTML 插件（如
html-webpack-plugin）默认压缩 HTML，会删掉多余空白 —— 需关闭collapseWhitespace或配置ignoreCustomFragments排除<pre>内容 - 后端模板渲染时用了
.strip()或类似方法清理字符串 - 复制粘贴代码时，从 IDE 复制带颜色高亮的代码，实际粘贴的是富文本，空格被转成全角或不可见字符 —— 应用纯文本粘贴（Ctrl+Shift+V 或右键选 Paste as Plain Text）
最稳的验证方式：打开浏览器开发者工具，定位到元素，看 Elements 面板里该标签内的文本节点是否真包含多个空格字符（鼠标选中可看到光标逐格移动）。
