javascript - 从 pre/code 标签中缩进的 HTML 源代码中删除前导空格

Question

我目前在预代码块中有以下 html:

                <pre class="prettyprint"><code>
                    &lt;html&gt;
                    &lt;body&gt;

                    &lt;form name=&quot;input&quot; action=&quot;html_form_action.asp&quot; method=&quot;get&quot;&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot;&gt;Male&lt;br&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot;&gt;Female&lt;br&gt;
                    &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
                    &lt;/form&gt; 

                    &lt;p&gt;If you click the &quot;Submit&quot; button, the form-data will be sent to a page called &quot;html_form_action.asp&quot;.&lt;/p&gt;

                    &lt;/body&gt;
                    &lt;/html&gt;
                </code></pre>

它在 html 源代码中缩进，以便在文档中获得更好的结构。如何删除前导空格？通过使用javascript还是有更简单的方法。

Answer 1

问题询问是否有 JavaScript 解决方案或更简单的方法来删除前导空格。有一个更简单的方法:

CSS

pre, code {
    white-space: pre-line;
}

DEMO

white-space

The white-space property is used to describe how whitespace inside the element is handled.

pre-line

Sequences of whitespace are collapsed.

为了保留现有的空白或缩进，每一行都可以包含在子标记中，并在行级别将 white-space 重置为 pre:

HTML

<pre>
    <code>
        <i>fn main() {</i>
        <i>    println!("hello world!");</i>
        <i>}</i>
    </code>
</pre>

CSS

pre, code {
    white-space: pre-line;
}

pre > code > i {
    white-space: pre;
}