white-spaceプロパティは当該要素に含まれる半角スペースや水平タブ、行送りなどの空白類文字をどのように処理するかを指定します(全角スペースは空白類文字に含まれません)。主に行内容の折り返しをコントロールするために使用します。
normalprenowrapinheritnormalwhite-spaceプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。
normalprenowrap任意の位置での改行には、contentプロパティでエスケープ文字(¥A)を挿入します。
"pre" は pre要素と類似した働きをしますが、代替え指定としての機能は果たしません。仕様において、UA は white-spaceプロパティによる指定を無視しても良いことになっているため、制作者が white-spaceプロパティを指定していても、それは無視される可能性があります。また、(X)HTML文書におけるソースコードの例示に pre要素が使用されますが、これを white-space : pre ; で代替え指定した場合、CSS に対応していない環境、またはスタイル処理を無効にしている状態において、他のプロパティの効果が無効になっていることと、pre要素の役割が無効になってしまったのとでは、まったく意味が異なります。したがって、(X)HTML文書におけるテキストの整形には、white-spaceプロパティを使うのではなく、pre要素でマーク付けを行う方が無難です。では、何のために定義されているのかと言うと、(X)HTML文書で使うのではなく、主に XML で記述された文書を XSLT で XHTML文書として表示させる場合のテキストの整形に使用されます。
"pre"、または "nowrap" が指定された場合、行内容のテキストが長すぎると、表示域に対して自動的に行の折り返しが行われるのではなく、行末での折り返しが抑制されるため、行ボックス、さらには表示域からテキストがはみ出て、ページ全体に横スクロールを生じさせることもあります。行ボックスからはみ出した内容の表示方法は、overflowプロパティで制御できます。
なお、CSS2.0 の改訂版の CSS2.1 では、"pre-wrap" と "pre-line" のキーワードが追加される予定です。"pre-wrap" は "pre" と同じように連続する空白類文字をそのまま表示しますが、行内容のテキストが長い場合には、画面の表示域に対して折り返して表示することが可能になる予定です。また、"pre-line" は、その働きは "normal" と同じですが、 任意の位置での改行を行うのに contentプロパティでエスケープ文字(¥A)を挿入することなく、ソース内で改行した部分はそのまま改行として表示される機能となる予定です。
pre" の値が無効)Windows版Internet Explorer 6 はレンダリングモードが後方互換(quirk)モードの場合に "pre" の値が無効になるバグを抱えた実装となっています。レンダリングモードの切り替わりについての詳細は !DOCTYPEスイッチを参照ください。
div { overflow : auto ; height : 5em ; }
.normal { white-space : normal ; }
.pre { white-space : pre ; }
.nowrap { white-space : nowrap ; }
Windows版Internet Explorer 6 では、この文書を後方互換モードでレンダリングするため、"pre" の値は無効です。
http://w3g.jp/css/text/white-space直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!