HTML怎么保留代码中的原有空格-html教程-PHP中文网

用标签包裹代码可保留空格和换行；html 默认压缩空白符，专为预格式化文本设计，仅或无法阻止空白符被压缩。

html怎么保留代码中的原有空格

用 `<pre class="brush:php;toolbar:false;"></pre>` 标签包裹代码即可保留空格和换行

HTML 默认会把连续空格、制表符、换行都压缩成一个空格，这是渲染引擎的默认行为。要原样显示代码里的缩进、对齐和空行，必须用 <pre class="brush:php;toolbar:false;"></pre> —— 它是专门为“预格式化文本”设计的语义标签。

常见错误是只加 <code> 或 <span></span>，这些标签不改变空白符处理逻辑，空格照样被吃掉。

<pre class="brush:php;toolbar:false;"><code>...</code></pre> 是最佳组合：语义清晰（<pre class="brush:php;toolbar:false;"></pre> 控制空白，<code> 表明内容为代码）
直接写 <pre class="brush:php;toolbar:false;"> let x = 1; </pre> 也能保留空格，但缺少语义，不利于可访问性和 SEO
如果内容来自用户输入或 CMS，注意 <pre class="brush:php;toolbar:false;"></pre> 不会自动转义 HTML 特殊字符，需提前对 、<code>>、& 做 HTML 实体编码，否则可能被解析为标签

`white-space` CSS 属性能替代 `<pre class="brush:php;toolbar:false;"></pre>` 吗

可以，但要小心选值。CSS 的 white-space 属性控制空白符如何处理，其中只有 pre、pre-wrap、pre-line 能保留空格；但它们行为有关键差异：

white-space: pre;：完全等价于 <pre class="brush:php;toolbar:false;"></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 class="brush:php;toolbar:false;"></pre> 或设置了正确的 white-space。

GitHub Flavored Markdown：用缩进 4 空格或围栏代码块 ```js → 渲染为 <pre class="brush:php;toolbar:false;"><code></code>，空格安全</pre>
Vue / React 模板中，直接写 {` if (x) {`} 不会保留缩进，因为 JSX/模板编译器按普通文本处理；应改用 <pre class="brush:php;toolbar:false;"><code>{` if (x) {`}</code></pre>
服务端模板（如 EJS、Jinja）：确保变量输出未开启自动 trim，例如 EJS 的（非转义）配合 <pre class="brush:php;toolbar:false;"></pre> 才可靠

为什么用了 `<pre class="brush:php;toolbar:false;"></pre>` 还是没保留空格

大概率是空格本身被编辑器或构建工具“优化”掉了。HTML 空格是否生效，取决于它是否真实存在于最终发送给浏览器的 HTML 字节流中。

编辑器保存时启用了 “trim trailing whitespace”，删掉了行尾空格（而 <pre class="brush:php;toolbar:false;"></pre> 需要的是行尾空格来对齐）
Webpack/Vite 的 HTML 插件（如 html-webpack-plugin）默认压缩 HTML，会删掉多余空白 —— 需关闭 collapseWhitespace 或配置 ignoreCustomFragments 排除 <pre class="brush:php;toolbar:false;"></pre> 内容
后端模板渲染时用了 .strip() 或类似方法清理字符串
复制粘贴代码时，从 IDE 复制带颜色高亮的代码，实际粘贴的是富文本，空格被转成全角或不可见字符 —— 应用纯文本粘贴（Ctrl+Shift+V 或右键选 Paste as Plain Text）

最稳的验证方式：打开浏览器开发者工具，定位到元素，看 Elements 面板里该标签内的文本节点是否真包含多个空格字符（鼠标选中可看到光标逐格移动）。