white-space

white-space は要素内の「ホワイトスペース」をどう取り扱うかを指定するプロパティ。ホワイトスペースは次の５つのことを指す。半角スペースタブキャリッジリターンラインフィードフォームフィード全角スペースは取り扱わないので注意すること。このプロパティを指定できるのは全ての要素で、プロパティ値はnormalnowrappreinheritの４つで、CSS 2.0 の改丁版 CSS 2.1 では上の４つに加えて「pre-wrap」と「pre-line」が追加された。
初期値は「normal」「inherit」を指定しなくても親要素の値を継承する。それぞれの値は次の通り。

normal

要素中に出現する連続した複数のホワイトスペースを１つの半角スペースとしてレンダリングする。

要素内の内容はボックス幅に合わせて改行される。

<br /> (<br>) を記述すると、そのとおりに改行される。

コード中のキャリッジリターン "\A" は無視される。

nowrap

要素中に出現した連続した複数のホワイトスペースを１つの半角スペースとしてレンダリングする。

<br /> (<br>) を記述しない限り、要素ブロック内で改行されずに１つの行でレンダリングされる。

コード中のキャリッジリターン "\A" は無視される。

pre

要素中に出現した連続した複数のホワイトスペースを複数のスペースとして記述通りレンダリングする。

<br /> (<br>) を記述しない限り、要素ブロック内で改行されずに１つの行でレンダリングされる。

コード中のキャリッジリターン "\A" もその通りにレンダリングする。

pre-wrap

pre 指定で要素ブロックの幅に合わせた自動改行を行なう。

要素中に出現した連続した複数のホワイトスペースを複数のスペースとして記述通りレンダリングする。

<br /> (<br>) を記述すると、そのとおりに改行される。

コード中のキャリッジリターン "\A" もその通りにレンダリングする。

pre-line

pre 指定で要素ブロック幅に合わせた改行を行なわない。

要素中に出現する連続した複数のホワイトスペースを１つの半角スペースとしてレンダリングする。

<br /> (<br>) を記述すると、そのとおりに改行される。

コード中のキャリッジリターン "\A" もその通りにレンダリングする。

pre-wrap は Firefox 3.0 でサポートしているが、pre-line は Firefox 3.1 以降でのサポートとなる。

レンダリングサンプル

width を 480 px に指定した dl 要素の子要素 dd に white-space: [値] を指定したレンダリングサンプル。
テキスト中には、→と←の間に４つの半角スペースが、→と←の間には２つのタブが含まれる。→と←の間に改行タグ <br /> を記述している。→と←の間にはコード上で改行を行なっている。

HTML ソース
<dd>４つの半角スペースがここに→    ←含まれています。２つのタブはここ→		←の間に含まれています。ここの間に→<br />←改行タグ <br /> を記述しています。ここには→
←コード上の改行 "\A" が存在します。</dd>

CSS
.td {
 white-space: Value;
}

white-space の扱い

この中でプロパティ値 pre は pre 要素と同じ効果をつくるのだが、UA は無視しても良いことになっているため、white-space: pre と記述してもレンダリングされるかどうかは保証されない。というのも、このプロパティは XML で記述した文章を XSLT で HTML に変換して表示させる場合に使用するようだ。
また、CSS を無効にしている環境や対応していない UA では制作者の期待通りの結果とならないため、HTML において pre による結果を期待するなら pre 要素 (<pre>) を使用することが望ましい。pre-wrap と pre-line についても同じことが言える。ただし Firefox 3.1a2pre, Safari 3.1.2, Opera 9.5.2 はHTML上に記述されたこれらのプロパティをレンダリングすることができた。

Library

• Home
• ってもzilla Archive
• CSS Test Cont.

Group

• Text Index

• text-shadow
• white-space
• text-transform
• text-indent