HTML怎么保留代码段里的缩进空格-html教程-PHP中文网

直接用标签能保留缩进，但常见塌陷主因是HTML源码中自身带首行空格/换行、制表符宽度不一致、中文字体非等宽、CSS覆盖white-space、innerHTML注入破坏空白符，须顶格书写、用textContent注入、设white-space:pre-wrap、指定等宽中文字体栈并配overflow-x:auto。

html怎么保留代码段里的缩进空格

直接用

标签就能保留缩进，但必须配合正确的 CSS 和内容注入方式，否则缩进会“看起来没了”或“粘贴时丢失”。

为什么里缩进还是塌了

常见错因不是标签没写对，而是 HTML 源码里

标签自身带了首行缩进或换行——浏览器会把那段空白也当内容渲染。比如：

<div>
  <pre class="brush:php;toolbar:false;">  .item { margin: 0; }

上面的两个空格和换行会被当成文本的一部分，导致代码整体右偏。正确写法是让

内容严格顶格：

<div><pre class="brush:php;toolbar:false;">.item { margin: 0; }

别依赖编辑器自动缩进内容，手动删掉前后换行和空格
如果模板引擎不支持无空格插值（如 Vue 的 {{ }}），改用 v-pre 或服务端预处理
检查 DevTools 中 computed 的 white-space 值是否真是 pre，别被全局样式覆盖

`white-space: pre-wrap` 是更实用的选择

纯 pre 不折行，长代码横向溢出；pre-line 又会吃掉所有行首空格。真正兼顾缩进保留和可读性的，是 pre-wrap：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

pre {
  white-space: pre-wrap;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Microsoft YaHei Mono', monospace;
  overflow-x: auto;
}

pre-wrap 保留所有 \n、\t、空格，同时允许在容器边界自然折行
必须配 overflow-x: auto，否则超长无空格字符串（如 base64）会撑破布局
禁用 text-align: center，它会让整块代码居中，破坏相对缩进关系

JS 动态注入代码时，`textContent` 是唯一安全做法

别用 innerHTML 往

里塞字符串——\n 会被忽略， 可能触发 XSS，空格全被压缩。正确方式只有一条：

const preEl = document.querySelector('pre');
preEl.textContent = `.container {\n  display: flex;\n  padding: 1rem;\n}`;

textContent 把字符串当纯文本，\n 和制表符原样保留
如果后端返回的是 HTML 转义字符串（如 ），先用 (new DOMParser()).parseFromString(str, 'text/html').documentElement.textContent 解码
高亮需求不要硬塞进，改用 highlight.js 或 Prism，它们内部已处理好 whitespace 边界

复制代码时缩进丢失？得换用 `navigator.clipboard.write()`

navigator.clipboard.writeText() 会规范化空白符，粘贴到 VS Code 或记事本时 \t 变空格、首尾空行被裁。要保留原始缩进，必须用底层 API：

async function copyCodeWithIndent(codeString) {
  try {
    const blob = new Blob([codeString], { type: 'text/plain' });
    await navigator.clipboard.write([
      new ClipboardItem({ 'text/plain': blob })
    ]);
  } catch (err) {
    console.error('复制失败:', err);
  }
}