Title

white-spaceとは

white-space とは次の語句からなるCSSのプロパティです。

white

読み: ホワイト
意味: 白、白い、白色

space

読み: スペース
意味: 空間、領域、容量

目次に戻る

white-spaceプロパティの概要

このプロパティは空白文字と改行文字をどのように扱うかを設定することができます。

文書内の空白スペース、タブ、改行をブラウザ上でどのように処理して表示するかを設定するということです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{white-space: 設定値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

<div>次は半角スペース[ ]次は全角スペース[　]次はTAB[	]サンプル終り</div>

HTMLのサンプルはdiv要素に上記コードのテキストを内包しているだけです。テキストの説明通りに[ ]の中に空白文字が入っています。 またサンプルでは、テキストの改行は一切していませんが、CSSでは要素の横幅を200pxに固定しています。

以下、上記の要素にCSSを適用したサンプルです。

初期値: normal

初期値のnormalキーワードは、 連続する空白文字は、まとめられて表示されます。 ソース内の改行文字も空白文字として扱われます。 また、行ボックスを埋めるために、必要なら行を折り返します。

div{
	width: 200px;
	white-space: normal;
}

目次に戻る

キーワード値: nowrap

nowrapキーワードは、 連続する空白文字は、まとめられて表示されますが、改行文字は認識しません。 また要素幅にあわせた自動改行を行いません。ただし、 br要素 があれば改行されます。

div{
	width: 200px;
	white-space: nowrap;
}

目次に戻る

キーワード値: pre

preキーワードは、 連続する空白文字、改行文字、br要素による改行もソースコードの形状のまま表示されます。 これは、 pre要素 の表示のされかたに似ています。ただ、pre要素と違うのはbr要素が認識されるという点です。

div{
	width: 200px;

	white-space: pre;
}

目次に戻る

キーワード値: pre-line

pre-lineキーワードは、 連続する空白文字は、まとめられて表示されます。 改行については、ソースコードの改行文字とbr要素を認識して改行が行われます。 また、要素の幅にあわせて自動改行を行います。

div{
	width: 200px;
	white-space: pre-line;
}

目次に戻る

キーワード値: pre-wrap

pre-wrapキーワードは、 連続する空白文字は、ソースコードのまま表示されます。 改行についても、ソースコードの改行文字とbr要素を認識して改行が行われます。 また、要素の幅にあわせて自動改行を行います。

div{
	width: 200px;
	white-space: pre-wrap;
}

目次に戻る

キーワード値: break-spaces

break-spacesキーワードは、 次の点を除いて、pre-wrapと同じ働きをします。

連続する空白は、行末にあるものを含め、空間を占有します。 空白は空間を占有して空白の後で、空白の間を含める形で改行する可能性があります。 また、そのような残された空白は、ぶら下がらず、ボックスの固有の寸法に影響します。

上記の点以外はpre-wrapと同じく、 連続する空白文字は、ソースコードのまま表示されます。 改行についても、ソースコードの改行文字とbr要素を認識して改行が行われます。 また、要素の幅にあわせて自動改行を行います。

div{
	width: 200px;
	white-space: break-spaces;
}

目次に戻る

グローバル値

white-spaceプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のnormalに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

セレクター{white-space: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

white-space: normal;

white-space: nowrap;

white-space: pre;

white-space: pre-line;

white-space: pre-wrap;

white-space: break-spaces;

目次に戻る