3

したがって、私は通常、HTML ソース コードを次のようにフォーマットします。

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

ただし、この書式設定スタイルは PRE 要素と互換性がありません。これらの要素内のすべての空白が意味を持つためです。

ここを参照してください： http://jsfiddle.net/pjEYm/

コード ブロックの表示を修正するには、ソース コードを次のようにフォーマットする必要があります。

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

ここを参照してください： http://jsfiddle.net/pjEYm/1/

ただし、これにより、ソース コードの整頓と可読性が低下します。

フォーマット スタイルを保持できるソリューションを使用したいと考えています。

white-spaceプロパティを設定してみました。解決策に最も近いのは ですwhite-space: pre-lineが、コードからすべてのインデントも削除されます。

ここを参照してください: http://jsfiddle.net/pjEYm/2/show/

だから、私はJavaScriptを使いました：

$( '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' ) );
});

ライブデモ: http://jsfiddle.net/pjEYm/3/

これは機能しますが、何らかのCSS ソリューションを好むでしょう。ありますか？

4

1 に答える 1

3

要素に負のマージンを設定できるという意味を除いて、CSS ソリューションはありませんがpre、固定数と単位を使用して設定する必要がありますch(これは一般的にサポートされていません)。これはかなりぎこちなく、柔軟性がなく、信頼性に欠けます。

要素は整形済みのテキストを意味し、pre本当に必要でない限り使用しないでください。プログラム コードでは、インデントに強制改行 ( <br>) と先頭の改行なしスペースのみを使用できます (理論的には信頼できませんが、実際には機能します)。ただし、HTMLソースのレイアウトが崩れたとしても、表示したいデータだけを書式設定済みとして含めるのが最も簡単で安全です(これは、それを読んだ少数の人だけが関心を持っていることです)。

于 2012-01-16T18:53:47.210 に答える