トラブル

Question

だから、私は、通常そのように私の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ソリューション。 1つはありますか？

Answer 1

pre要素にマイナスのマージンを設定できるという点を除き、固定番号とchユニット（普遍的にサポートされていない）を使用して設定する必要があるという点を除いて、CSSソリューションはありません。これはやや不器用で柔軟性がなく、信頼性が低いでしょう。

「pre」という要素は、書式設定済みのテキストを意味します。本当に必要な場合以外は使用しないでください。プログラムコードでは、強制改行（<br>）とインデント用のノーブレークスペースを使用できます（理論的には信頼できませんが、実際には機能します）。ただし、HTML ソースのレイアウト（これは読んでいる人が少数です）を壊しても、あらかじめフォーマットして表示したいデータだけを入れるのが最も簡単で安全です。