Updated / Published

white-spaceプロパティは当該要素に含まれる半角スペースやタブ文字、ソース内の改行文字といった空白類文字をどのように処理するかを指定します(全角スペースは空白類文字に含まれません)。主に行内容の折り返しをコントロールするために使用します。

  • normal
  • nowrap
  • pre
  • pre-wrap
  • pre-line
  • inherit
初期値
normal
適用対象
すべての要素
継承
する
メディア
visual

white-spaceプロパティの値

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

normal
連続する空白類文字をひとつにまとめ、ソース内の改行文字も空白類文字として扱われます。行ボックスが満たされると折り返します。
nowrap
連続する空白類文字をひとつにまとめ、ソース内の改行文字も空白類文字として扱われます。行内容を折り返しません。
pre
連続する空白類文字をそのまま表示し、行内容を折り返しません。行の折り返しは、ソース内の改行文字とbr要素contentプロパティでエスケープ文字(\A)を挿入した位置で行われます。
pre-wrap
連続する空白類文字をそのまま表示し、行の折り返しは、ソース内の改行文字とbr要素contentプロパティでエスケープ文字(\A)を挿入した位置、または行ボックスが満たされると折り返します。
pre-line
連続する空白類文字をひとつにまとめ、行の折り返しは、ソース内の改行文字とbr要素contentプロパティでエスケープ文字(\A)を挿入した位置、または行ボックスが満たされると折り返します。
改行 空白とタブ文字 テキストの折り返し
normal 詰める 詰める 折り返す
nowrap 詰める 詰める 折り返さない
pre 残す 残す 折り返さない
pre-wrap 残す 残す 折り返す
pre-line 残す 詰める 折り返す

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

なお、"pre" の値は pre要素と類似した働きをしますが、代替指定としての役割までは果たしません。仕様において、UAwhite-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 ; }