[CSS] 改行やスペースをそのまま表示する

HTML上の改行やスペースをそのままブラウザ上に表示するには、
CSSの「white-space」を使用します。

構文

構文と指定できる値は以下の通りです。

white-space:<値>;
【white-spaceの値】
メモ
pre改行、半角スペース、タブ文字をそのまま表示する。
nowrap改行、半角スペース、タブ文字を半角スペースに置き換えて表示する。 囲われているボックスからはみ出す場合でも自動改行はされない。
normal改行、半角スペース、タブ文字を半角スペースに置き換えて表示する。 囲われているボックスからはみ出す場合は自動改行される。

サンプル

例)改行、半角スペース、タブ文字をそのまま表示する

これは 改行して 表示されます。

brタグを付けなくても改行されていることがわかります。

備考

  • normalがデフォルト値なので、normalにしたい場合は特に指定する必要はありません。

コメント

タイトルとURLをコピーしました