HTML pre标签如何同时保留首行缩进与内部间距？

你需要的是CSS属性值 white-space: pre-wrap，它完全满足你的需求：

• 完整保留内容里的所有连续空格（包括源码缩进和文本内部的空格）
• 保留原始换行符
• 当内容超出容器宽度时自动换行，避免原生<pre>标签横向溢出的问题

示例代码 #

<!-- 内联样式写法 -->
<pre style="white-space: pre-wrap;">
function test() {
    // 这里有  两个连续空格
    console.log("hello   world"); // 这里有三个连续空格
}
</pre>

/* 全局样式写法，更适合批量使用 */
pre {
    white-space: pre-wrap;
    font-family: monospace; /* 保持源码字体风格 */
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: 4px;
}

原理说明 #

pre-wrap 和你之前用的 pre-line 核心差异在于对连续空格的处理：

• pre-line 会将多个连续空格合并为单个空格，这就是你丢失内部空格的原因
• pre-wrap 继承了原生<pre>对空格、换行的保留特性，同时新增了自动换行的功能，完美平衡了源码可读性和页面布局需求

内容的提问来源于stack exchange，提问作者kenneyher