CSSのwhite-spaceの使い方|preやnowrapなど

今回はCSSのwhite-spaceの使い方を紹介します。

 

white-spaceとは?

white-spaceとはソース中の半角スペースやタブ、改行をブラウザでどのように表示するかを指定するプロパティです。

値がいくつかあるので順番に紹介します。

 

normal(初期値)

ソース中の連続した改行やタブ、半角スペースは1つの半角スペースにまとめられます。

テキストエディタで半角スペースやタブを連続で入力しても、ブラウザでは半角スペース1つ分として表示されます。

また、テキストエディタで改行してもブラウザでは改行されません(改行はbrタグで行うため)。

初期値なので、white-spaceに特に指定がない場合はこのnormalが指定されます。

 

nowrap

nowrapを指定するとボックスをはみ出しても改行されずにはみ出した状態で表示されます。

テキストエディタで入力した連続した半角スペースなどは1つの半角スペースにまとめられます。

また、brタグを入れない限り永遠に折り返しはされません。パソコンの画面外にも平気ではみ出したりします。

 

pre

preでは改行や半角スペースはそっくりそのまま反映されるものの、自動で行が折り返されることはありません。

テキストエディタで半角スペースを3つ連続で入力したら、ブラウザでも半角スペースが3つ表示されたりします。

つまり、テキストエディタの半角スペースやタブはブラウザに全て反映されるが、改行はnowrapと同じで返さないということになります。

 

pre-wrap

pre-wrapはテキストエディタの半角スペースやタブがそっくりそのまま反映され、自動で折り返しができます。

preの折り返しができるようになったバージョンですね。

 

pre-line

pre-lineでは連続した半角スペースやタブは1つの半角スペースにまとめられますが、改行はそのまま反映されます。

例えばテキストエディタで3回連続で改行したら、ブラウザでも3回改行されます。

 

まとめ

white-spaceは基本的に初期値のnormalの状態でokです。

ボックスからあえてはみ出させたいときにnowrapを使うくらいで、他の3つは正直ほとんど使いません。

white-spaceの値は5つありますが、nowrapだけ覚えていれば基本大丈夫です。

他の値を指定する必要があるなら、その時に調べるのがコスパがいいですね。