W3G

white-spaceプロパティの値

white-spaceプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。空白類文字とは半角スペースやタブ文字、ソース内の改行文字のことです。

normal

連続する空白類文字をひとつにまとめ、ソース内の改行文字も空白類文字として扱われます。行ボックスが満たされると折り返します。

nowrap

連続する空白類文字をひとつにまとめ、ソース内の改行文字も空白類文字として扱われます。行内容を折り返しません。

pre

連続する空白類文字をそのまま表示し、行内容を折り返しません。行の折り返しは、ソース内の改行文字とbr要素とcontentプロパティでエスケープ文字（\A）を挿入した位置で行われます。

pre-wrap

連続する空白類文字をそのまま表示し、行の折り返しは、ソース内の改行文字とbr要素とcontentプロパティでエスケープ文字（\A）を挿入した位置、または行ボックスが満たされると折り返します。

pre-line

連続する空白類文字をひとつにまとめ、行の折り返しは、ソース内の改行文字とbr要素とcontentプロパティでエスケープ文字（\A）を挿入した位置、または行ボックスが満たされると折り返します。

"pre"、または "nowrap" が指定された場合、行内容のテキストが長すぎると、表示域に対して自動的に行の折り返しが行われるのではなく、行末での折り返しが抑制されるため、行ボックス、さらには表示域からテキストがはみ出て、ページ全体に横スクロールを生じさせることもあります。行ボックスからはみ出した内容の表示方法は、overflowプロパティで制御できます。

なお、"pre" の値は pre要素と類似した働きをしますが、代替指定としての役割までは果たしません。仕様において、UA は white-spaceプロパティによる指定を無視しても良いことになっているため、制作者が white-spaceプロパティを指定していても、無視される可能性があります。さらに、(X)HTML文書におけるソースコードの例示に pre要素が使用されますが、これを white-space : pre ; で代替指定した場合、CSS に対応していない環境、またはスタイル処理を無効にしている状態において、他のプロパティの効果が無効になっていることと、pre要素の役割が無効になってしまったのとでは、まったく意味が異なります。したがって、(X)HTML文書におけるテキストの整形には、white-spaceプロパティを使うのではなく、pre要素でマーク付けを行う方が無難です。

white-spaceプロパティの用途しては、XML で記述された文書を XSLT で XHTML文書として表示させる場合のテキストの整形に使用するなどが考えれます。

white-spaceプロパティの実装状況

IE

◯：IE6後方互換モードでは"pre" の値が無効。IE8+より"pre-wrap"と"pre-line"のキーワードをサポート。

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

IE6 はレンダリングモードが後方互換（quirk）モードの場合に "pre" の値が無効になるバグを抱えた実装となっています。レンダリングモードの切り替わりについての詳細は !DOCTYPEスイッチを参照ください。

サンプル

pre           { white-space : normal ; overflow : auto ; height : 10em ; }
.normal    { white-space : normal ; }
.nowrap   { white-space : nowrap ; }
.pre          { white-space : pre ; }
.pre-wrap { white-space : pre-wrap ; }
.pre-line   { white-space : pre-line ; }