web-dev-qa-db-ja.com

固定幅のHTMLの<pre>タグ

<pre>タグを使用して、事前にフォーマットされたテキスト(改行、スペース、タブなどを含む)を表示していますが、改行のない大きな行は1行で表示され、スクロールバーが追加されます。

<pre>タグの幅を制限したい(大きな行が分割されて新しい行になり、スクロールが不要になるようにしたい)。これは可能ですか、それとも他のタグを使用できますか?

コードは次のようなものです:

$.post("contr.php", q1, function(data) {
    $("#el_text").html("< pre>"+data+"< /pre>");
});

ほとんどすべてのブラウザでそれをサポートする包括的な方法:

pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    Word-wrap: break-Word; /* IE 5.5+ */
}

私は少し前に同じ問題を抱えていて、ここで解決策を見つけました: http://codingforums.com/showthread.php?t=4329

86
Karim
pre{
    white-space:pre-wrap;
}

..Firefoxで必要なことを実行し、Chrome-行を折り返しますが、空白を維持します。しかし、残念ながらIEはそれをサポートしていないようです(ただし、 IE8ではまだ確認されていません)。

編集:IE8 それをサポートする

16
Dan

カリムが言ったことを行った後でもブロックの右側にスペースが割り当てられている場合は、内部を囲んでいる可能性があります。

テーブルタグは、コンテンツがワードラップされている場合でも、プレストリング全体にスペースを割り当てます。これにより、プレブロックの右側に空白の領域が生じます。

この場合、divや段落などの他のタグに置き換えます。

0
Jaison