white-spaceはスペース・タブ・改行の表示方法を指定するプロパティです。
{white-space: 表示方法;}
white-spaceの指定方法
white-spaceプロパティでは以下のような値を指定できます。
- normal
- pre
- nowrap
- pre-wrap
- pre-line
normal
normalは表示方法を指定しません。
pre
preを指定すると、スペース・タブ・改行はそのまま表示されます。
ウィンドウの端では自動で改行されません。
nowrap
nowrapを指定すると、スペース・タブ・改行は半角スペースとして表示されます。
ウィンドウの端では自動で改行されません。
pre-wrap
pre-wrapを指定すると、スペース・タブ・改行はそのまま表示されます。
また、ウィンドウの端で自動で改行されます。
pre-line
pre-lineを指定すると、改行はそのまま表示され、スペースとタブは半角スペースとして表示されます。
ウィンドウの端で自動改行されます。
それぞれの値を指定したときの違い
white-spaceプロパティでそれぞれの値を指定したときの違いを確認したいと思います。
normalを指定しています。normalを指定しています。normalを指定しています。
normalを指定しています。
normalを指定しています。
preを指定しています。preを指定しています。preを指定しています。
preを指定しています。
preを指定しています。
nowrapを指定しています。nowrapを指定しています。nowrapを指定しています。
nowrapを指定しています。
nowrapを指定しています。
pre-wrapを指定しています。pre-wrapを指定しています。pre-wrapを指定しています。
pre-wrapを指定しています。
pre-wrapを指定しています。
pre-lineを指定しています。pre-lineを指定しています。pre-lineを指定しています。
pre-lineを指定しています。
pre-lineを指定しています。
どの枠の幅も300pxにしていて、preやnowrapを指定すると自動改行がされずに枠からはみ出ていたり、どのような違いがあるかわかると思います。
スマホで見ても、ウィンドウ幅からはみ出ています。
[…] 関連記事 『pre要素は整形済みテキストを表す【HTML】』 『white-spaceでスペース・タブ・改行の表示指定【CSS】』 […]