web-dev-qa-db-ja.com

固定幅のHTMLの<pre>タグ

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

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

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

$.post("contr.php", q1, function(data) {
    $("#el_text").html("< pre>"+data+"< /pre>");
});
htmlcsstags
42
Edward Wong Hau Pepelu Tivrusk

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

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