HTML preタグのコンテンツの自動行折り返しの問題を解決する

 要素は、事前にフォーマットされたテキストを定義できます。通常、pre 要素で囲まれたテキストには空白と改行が保持されます。テキストも固定幅フォントで表示されます。 </p>
<p></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> タグの一般的な用途は、コンピューターのソース コードを表すことです。 <p>よく遭遇する問題は、コードに画像や Web ページのアドレスが含まれる場合、コードが非常に長くなり、その結果、ページが引き伸ばされたり、コードが境界を超えたりすることです。 <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:hiddenを使うと元のコードが隠れてしまい、スクロールバーが表示されてしまい、非常に不便です。 </p><p><pre class="brush:php;toolbar:false"> のコンテンツの自動行折り返しの問題を解決する方法: </p><p>1. まず、<a href="http://www.php.cn/wiki/878.html" target="_blank">word-wrap</a>: Break-word; を使用してコンテンツを自動的に折り返します。 、Safariも使えるし、FFも悲劇。 </p><p>クリックしてデモを表示します</p><p>2. pre: </p><pre class="brush:html;toolbar:false">xmp, pre, plaintext {
display: block;
font–family:–moz–fixed;
white–space: pre;
margin:1em0;
}

ログイン後にコピー

のデフォルトのブラウザスタイルを確認しました。すべてにこの white-space: pre があり、white-space:

の値の説明が通常のデフォルトです。空白はブラウザによって無視されます。事前の空白はブラウザによって保持されます。 HTML の

 タグのように動作します。 nowrap テキストは折り返されず、テキストは <br> タグに遭遇するまで同じ行に続きます。 pre-wrap は空白シーケンスを保持しますが、行は通常どおり折り返されます。 pre-line は空白シーケンスをマージしますが、改行は保持します。継承は、空白 <a href="http://www.php.cn/wiki/169.html" target="_blank"> 属性 </a> の値が親要素から継承される必要があることを指定します。 </p><p>空白シーケンスを保持しながら通常通り改行を実行する pre-wrap があります。 </p><p>これで、スタイルを追加するだけです: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">pre {
white-space: pre-wrap;
word-wrap: break-word;
}

ログイン後にコピー