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

2019年10月13日

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

構文

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

【white-spaceの値】

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

サンプル

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

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

備考

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