問題タブ [pre]

これの結果を見ることに興味があります。

テキストに複数のスペースを入れたい場合は、いくつかの方法で行うことができます。

一方通行：

次の方法:

そして最後の方法:

どれが一番いいでしょうか？

pre タグには、水平方向に間隔を空ける機能もあり、これは簡単な方法です。

編集可能なタグのグループが必要ですpre。各タグは1行のテキストを表します。行は行番号（編集不可）で始まり、その後編集可能である必要があります。私がそうする場合<span contentEditable="false">1 </span><pre contentEditable="true"></pre>、は編集できspanず、preは編集可能ですが、preは次の行にあります。

（ ）span内に収まるように変更すると、全体が編集可能になり、1が行の中央に表示され、奇妙なタブがインデントされます。pre<pre contentEditable="true"><span contentEditable="false">1 </span></pre>

行頭の行番号を取得するにはどうすればよいpreですか？

</pre>「未開封」がたくさんあり、内部に関連する値がないコードがあるとしましょう。<pre>メジャーが順調に始まり、貴重なコンテンツで終わったとしましょう。</pre>PHP を使用してメインの外側の未使用および余分なコンテンツを削除して、コードをクリーンアップするにはどうすればよい<pre>ですか (DOM とは言わないでください)。

読んでくれてありがとう。

Egで編集

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

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

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

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

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

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

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

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

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

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

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

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

表なしで pre タグを水平方向および垂直方向に配置することは可能ですか? Web ページにASCII アートを縦横に配置したいと考えています。私はすでにtables を使用して適応を成功させていますが、それを他の要素や CSS を使用するように変換できるかどうかを知りたいです。ASCII アートのすべての作品は高さと幅が異なるため、私の問題を解決するには、固定された高さや幅の要件を持たないようにする必要があることに注意することが重要です。

ありがとうございました。

HTML の段落テキストを完全に揃えて表示したいので (MS Word ファイルで起こるように)、フォーマットと固定幅の段落内のテキスト配置の「両端揃え」に問題があります。ただし、これは起こりません。それを達成するために何を変更する必要がありますか？

編集:<pre>タグをタグに置き換える<p>と、コードは正しく機能します。誰かが私に理由を説明できますか？<pre>タグの使い方が間違っているのかもしれません。

要素を使用してpre、特殊なUnicode文字（⚡⚑▶◀⁋）を含むテキストを表示しています。ブラウザがこれらの特殊文字を通常の文字よりも広くレンダリングし、水平方向により多くのスペースを占めることに気づきました。

これはここで簡単に確認できます：https ：//gist.github.com/968b5c22cce14909cf27 両方の行は20文字ですが、最初の行は長い（画面のピクセル）ことに注意してください。

pre要素（またはモノスペースフォントが適用されている他の要素）に実際に固定された文字幅を強制する方法（CSS）はありますか？

ChromeとFirefoxをチェックしましたが、どちらも特殊文字の幅を広げています。

私は次のHTMLを持っています:

そして、次の CSS:

h2しかし、と のpre要素の間には、私が取り除けないように見えるギャップがあります。

ここで実際の問題を確認できます: http://jsfiddle.net/gaby/k5V8U/

出力は次のとおりです。

pre を使用したコード

出力は次のとおりです。

<pre>タグの何がそんなに特別なのですか？のみに使用されline breaksますか?