删除 pre HTML 中的多余空格

当我们在使用 pre HTML 元素展示代码时，可能会遇到一些多余的空格，这些空格可能会影响我们对代码的阅读体验，甚至会引入 Bug。因此，我们需要对这些多余的空格进行删除。

方法一：使用 CSS 样式

我们可以使用 CSS 样式来删除 pre 元素中的多余空格。下面是一个示例代码：

<pre class="code">
    function foo() {
        console.log("Hello World");
    }
</pre>

pre.code {
    white-space: pre-wrap;
    word-wrap: break-word;
}

上面的 CSS 样式中，我们使用了 white-space: pre-wrap 和 word-wrap: break-word 属性，这样就可以自动折行，并去掉多余的空格。

方法二：使用 JavaScript

我们也可以使用 JavaScript 来删除 pre 元素中的多余空格。下面是一个示例代码：

<pre id="code">
    function foo() {
        console.log("Hello World");
    }
</pre>

const pre = document.getElementById('code');
pre.innerHTML = pre.innerHTML.replace(/\n\s+/g, '\n');

上面的 JavaScript 代码中，我们使用了正则表达式来去掉多余的空格。

总结

以上两种方法都可以用来删除 pre HTML 元素中的多余空格，具体采用哪种方法取决于实际情况。如果在样式中使用的话，可以更好地结合项目整体效果；若在脚本中使用，则可以更灵活地根据需求编写。