| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {white-space: 値 } |
| 値 の形式 | normal，pre，nowrap，pre-wrap，pre-line |
| 初 期 値 | 未定義 |
| 対応ブラウザー | C1+ / e6+ / N4+ / Fx1+ / Op4+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
white-spaceプロパティ は，テキストの 半角スペース・タブ・改行の扱い方 を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| normal | 半角スペース・タブ・改行，および，それらの連続は，１つの半角スペースとして表示します。 これらの部分で自動改行します。 |
| pre | 半角スペース・タブ・改行，および，それらの連続は，そのまま表示します。 ブロックコンテナからはみ出す行があっても，強制改行以外の部分では改行されません。 |
| nowrap | 半角スペース・タブ・改行，および，それらの連続は，１つの半角スペースとして表示します。 この指定を持つ要素の範囲では自動改行しません。 |
| pre-wrap | pre と同様に，半角スペース・タブ・改行，および，それらの連続は，そのまま表示します。 ただし，normal と同様に，これらの部分で自動改行します。 |
| pre-line | normal と同様に，半角スペース・タブ・改行，および，それらの連続は，１つの半角スペースとして表示し，これらの部分で自動改行します。 また，normal では無視される 改行や復帰はそのまま実行します。 |
各値に対する半角スペース・タブ・改行，および，それらの連続と自動改行の関係をまとめると，次のようになります。
| 値 | 半角スペース・タブ | 自動改行 | 改行コード |
|---|---|---|---|
| normal | １個に置き換え | する | １個の半角スペース |
| pre | そのまま表示 | しない | そのまま表示 |
| nowrap | １個に置き換え | しない | １個の半角スペース |
| pre-wrap | そのまま表示 | する | そのまま表示 |
| pre-line | １個に置き換え | する | そのまま表示 |
なお，表のセルに対して white-spaceプロパティで nowrap を指定するとこのセル内のテキストは改行されません。 ただし，widthプロパティが指定されている場合はそちらが優先されるため自動改行されることがあります。
上記のとおり，white-spaceプロパティは元々「半角スペース・タブ・改行，および，それらの連続の取り扱い」に関する設定です。 従って，【半角英数】の場合では，例えば，
<table border="1">
<tr>
<th style="white-space:nowrap;">AAAAAAAAAAAAAAAAA BBBBBBBBBBBBBB</th>
<th>AAAAAAAAAAAAAAAAA BBBBBBBBBBBBBB</th>
<th>AAAAAAAAAAAAAAAAA BBBBBBBBBBBBBB</th>
</tr>
</table>
のようにしますと，一番左のセルは「AAAAAAAAAAAAAAAAA」と「BBBBBBBBBBBBBB」の間にブランクがありますが，white-space:nowrap; の指定があるので改行されません。 それに対して，真ん中と右側のセルではこの部分で改行されます。
とくに，日本語の全角文字列 の場合は，
「一文字ごとに英文の半角スペースが挟まれているとみなした取り扱い」
という 特別な扱い になっていることになります。 （英文の場合 単語（word） が単位であるのに対して日本語では 文字（character） が単位です。）さらに付け加えますと，「AAAAAAAAAAAAAAAAABBBBBBBBBBBBBB」のような ブランクや改行の入らない半角文字列 の場合では，これを「１つの単語」として扱うため指定が無くても改行されません。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
p.sample { width: 600px; background-color:#00DDDD; }
.wsp1 { white-space: normal; }
.wsp2 { white-space: pre; }
.wsp3 { white-space: nowrap; }
.wsp4 { white-space: pre-wrap; }
.wsp5 { white-space: pre-line; }
-->
</style> |
| HTML <body> ～ </body> |
<p class="sample wsp1">{ white-space: normal; } のとき：<br> 単一のスペース→ ←単一のスペース，単一のタブ→ ←単一のタブ，単一の改行→ ←単一の改行 <br>5個のスペース→ ←5個のスペース，5個のタブ→ ←5個のタブ，3個の改行→ ←3個の改行</p> <p class="sample wsp2">{ white-space: pre; } のとき：<br> 単一のスペース→ ←単一のスペース，単一のタブ→ ←単一のタブ，単一の改行→ ←単一の改行 <br>5個のスペース→ ←5個のスペース，5個のタブ→ ←5個のタブ，3個の改行→ ←3個の改行</p> <p class="sample wsp3">{ white-space: nowrap; } のとき：<br> 単一のスペース→ ←単一のスペース，単一のタブ→ ←単一のタブ，単一の改行→ ←単一の改行 <br>5個のスペース→ ←5個のスペース，5個のタブ→ ←5個のタブ，3個の改行→ ←3個の改行</p> <p class="sample wsp4">{ white-space: pre-wrap; } のとき：<br> 単一のスペース→ ←単一のスペース，単一のタブ→ ←単一のタブ，単一の改行→ ←単一の改行 <br>5個のスペース→ ←5個のスペース，5個のタブ→ ←5個のタブ，3個の改行→ ←3個の改行</p> <p class="sample wsp5">{ white-space: pre-line; } のとき：<br> 単一のスペース→ ←単一のスペース，単一のタブ→ ←単一のタブ，単一の改行→ ←単一の改行 <br>5個のスペース→ ←5個のスペース，5個のタブ→ ←5個のタブ，3個の改行→ ←3個の改行</p> |
| ブラウザー 表示例 （未対応のブラウザーでは正しく表示されません） |
|---|
{ white-space: normal; } のとき： { white-space: pre; } のとき： { white-space: nowrap; } のとき： { white-space: pre-wrap; } のとき： { white-space: pre-line; } のとき： |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css"> <!-- .wsp3 { white-space: nowrap; } --> </style> |
| HTML <body> ～ </body> |
<table border="1" style="margin-left:5em;"> <caption>【使用例２－１】の【ブラウザー 表示】</caption> <tr><th class="wsp3">ああああああああああああ</th> <th>いいいいいいいいいいいい</th> <th>うううううううううううう</th> </tr> </table> <br> <table border="1" style="margin-left: 5em;"> <caption>【使用例２－２】の【ブラウザー 表示】</caption> <tr> <th class="wsp3">AAAAAA BBBBB CCCCC</th> <th>AAAAAA BBBBB CCCCC</th> <th class="wsp3">AAAAAA-BBBBB-CCCCC</th> <th>AAAAAA-BBBBB-CCCCC</th> </tr> </table> |
| ああああああああああああ | いいいいいいいいいいいい | うううううううううううう |
|---|
| AAAAAA BBBBB CCCCC | AAAAAA BBBBB CCCCC | AAAAAA-BBBBB-CCCCC | AAAAAA-BBBBB-CCCCC |
|---|