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

 要素は、事前にフォーマットされたテキストを定義できます。通常、pre 要素で囲まれたテキストには空白と改行が保持されます。テキストも固定幅フォントで表示されます。 <p></p><pre class="brush:php;toolbar:false"> タグの一般的な用途は、コンピューターのソース コードを表すことです。 <p>よく遭遇する問題は、コードに画像や Web ページのアドレスが含まれる場合、コードが非常に長くなり、その結果、ページが引き伸ばされたり、コードが境界を超えたりすることです。 <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:hiddenを使うと元のコードが隠れてしまい、スクロールバーが表示されてしまい、非常に不便です。 </p><p></p><pre class="brush:php;toolbar:false"> のコンテンツの自動行折り返しの問題を解決する方法: <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:php;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>空白シーケンスを保持しながら通常通り改行を実行する pre-wrap があります。 </p><p>これで、スタイルを追加するだけです: </p><pre class='brush:php;toolbar:false;'>pre {
white-space: pre-wrap;
word-wrap: break-word;
}

 のコンテンツが自動的に折り返されるようにします。 

以上がHTML preタグのコンテンツの自動行折り返しの問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。