Javascript 前置元素内部存在过多空白的问题

因此，我通常将HTML源代码的格式设置为：

<article>
    <section>
        <p>
            Text...
            Text...
        </p>
        <pre>
            Code...
            Code...
            Code...
        </pre>
        <p>
            Text...
            Text...
        </p>
    </section>
</article>

<article>
    <section>
        <p>
            Text...
            Text...
        </p>
        <pre>
            Code...
Code...
Code...</pre>
        <p>
            Text...
            Text...
        </p>
    </section>
</article>

$( 'pre' ).each( function () {
    var lines, offset;

    // split the content of the PRE element into an array of lines
    lines = $( this ).text().split( '\n' );

    // the last line is expected to be an empty line - remove it
    if ( lines.length > 1 && lines[ lines.length - 1 ].trim() === '' ) {
        lines.pop();
    }

    // how much white-space do we need to remove form each line?
    offset = lines[ 0 ].match( /^\s*/ )[ 0 ].length;

    // remove the exess white-space from the beginning of each line
    lines = lines.map( function ( line ) {
        return line.slice( offset );
    });

    // set this new content to the PRE element
    $( this ).text( lines.join( '\n' ) );
});

现场演示：

<article>
    <section>
        <p>
            Text...
            Text...
        </p>
        <pre>
            Code...
Code...
Code...</pre>
        <p>
            Text...
            Text...
        </p>
    </section>
</article>

---

虽然这样做有效，但我还是更喜欢某种CSS解决方案。有吗？

没有CSS解决方案，除非您可以在

pre

元素上设置负边距，但是您需要使用固定的数字和

ch

单元来设置它（这不是普遍支持的）。这将是相当笨拙、僵化和不可靠的

<article>
    <section>
        <p>
            Text...
            Text...
        </p>
        <pre>
            Code...
Code...
Code...</pre>
        <p>
            Text...
            Text...
        </p>
    </section>
</article>

---

pre

元素表示预先格式化的文本，除非您真的需要，否则不应该使用它。对于程序代码，可以使用强制换行（

）和无换行空格进行缩进（理论上不可靠，但在实践中有效）。然而，只包含您希望显示为预格式化的数据是最简单和最安全的，即使它破坏了HTML源的布局（只有少数阅读它的人感兴趣）。

您的问题是我的解决方案。

<article>
    <section>
        <p>
            Text...
            Text...
        </p>
        <pre>
            Code...
Code...
Code...</pre>
        <p>
            Text...
            Text...
        </p>
    </section>
</article>