1. ホーム
  2. Web制作
  3. HTML/Xhtml

プリタグを自動改行させる サンプルコード

2022-01-13 17:26:20
pre 要素は整形済みテキストを定義します。pre要素で囲まれたテキストは通常、空白と改行が残ります。また、テキストは等幅フォントとして描画されます。
pre>タグの一般的な用途は、コンピュータのソースコードを表現することです。技術ブログの場合、preタグはコードの出力やハイライトによく使われ、デフォルトではpreタグのコンテンツはスコープ外に出ても自動的に折り返されません。
以下は、<pre >タグ内のコンテンツを自動的に折り返し、W3C標準に準拠させる方法です(マルチブラウザー対応)。
コピーコード
コードは以下の通りです。

pre{
white-space:pre-wrap; /* css3.0 */
white-space:-moz-pre-wrap; /* Firefox */
white-space:-pre-wrap; /* Opera 4-6 */
white-space:-o-pre-wrap; /* Opera 7 */
word-wrap:break-word; /* Internet Explorer 5.5+ */
}


コピーコード
コードは以下の通りです。

pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; /* I'm a long, long code, see if I've changed the line? */}