プリタグを自動改行させる サンプルコード
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? */}
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? */}
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLの相対的・絶対的な使い方と違いについて解説
-
htmlのドラッグ&ドロップによるコンテンツ位置の2つの実装方法
-
htmlで細い線のテーブルを作る簡単な例
-
フラッシュビデオフォーマット(flv、swf)ファイルをhtmlファイルに埋め込む方法
-
HTMLのテキスト外表示省略... テキストオーバーフローの実装
-
HTML画像imgタグ_动力节目Java学院整理
-
HTMLページでjs、cssファイルのキャッシュを自動でクリーンアップ(バージョン番号を自動で付与)。
-
htmlファイル内の中国語の乱れとブラウザでの表示に関する問題点
-
HTML要素のID属性とName属性の違いについて
-
入力タグの名前と値の違いについて