CSS3

プロパティ

white-space

→●、mdn

空白と折り返し。

このプロパティは、次の 2 つを指定する：

• 空白を、縮約するかどうか／どう縮約するか。
• 各行を 非強制の自動折り返し機会の所で折り返してもよいかどうか。

各種 値は、次の意味を持ち、［空白処理規則、行分断規則］に則って解釈するものとする：

normal

この値は、［各 空白並びを 1 個の文字に（一部の事例では 0 個の文字に）縮約する］ことを、ユーザー エージェントに指図する。各行は、行内軸における過フローを最小化するよう、［有効な行分断規則により決定される、許容される自動折り返し機会］の所で折り返してもよい。

<DIV style="border:1px solid red; width:100px; font-size:20px;
 white-space:normal;
">あいう えおかきくけ<BR>abc defghijklmn</DIV>

pre

ユーザー エージェントは、空白並びを縮約しないようにする。

LF などの区分分断は、強制行分断として保全される。

各行は、強制行分断の所に限り分断する ― ブロック コンテナの中に収まらない内容は過フローする。

<DIV style="border:1px solid red; width:100px; font-size:20px;
 white-space:pre;
">あいうえおかき<BR>a	bcdefghij</DIV>

nowrap

normal 同様、空白は縮約するが、pre 同様、折り返しは許容しない。

<DIV style="border:1px solid red; width:100px; font-size:20px;
 white-space:nowrap;
">あいうえおかき<BR>a	bcdefghij</DIV>

pre-wrap

pre 同様、空白は保全するが、normal 同様、折り返しは許容する。

<DIV style="border:1px solid red; width:100px; font-size:20px;
 white-space:pre-wrap;
">あいうえおかき<BR>a	b cdefghijkl</DIV>

break-spaces

次に該当する場合を除き、pre-wrap のふるまいに一致する：

• ［保全空白／その他のスペース分離子］が成す並びは、行の末尾も含め、常に空間を占める。
• 各［保全空白／その他のスペース分離子］の後には（直後に別のそれがあっても）、行分断法機会が存在する。

注記： この値は、空白に因る過フローが決して生じないことは保証しない。例えば、行の長さが 1 個の空白が収まるに満たないほど短い場合、過フローは避けれない。

<DIV style="border:1px solid red; width:100px; font-size:20px;
 white-space:break-spaces;
">あいうえおかき<BR>a	b cdefghijkl</DIV>

pre-line

normal 同様、［連続する空白は縮約する／折り返しは許容する］が、ソース内の区分分断は、強制行分断として保全される。

<DIV style="border:1px solid red; width:100px; font-size:20px;
 white-space:pre-line;
">あいうえおかき<BR>a	b cdefghijkl</DIV>

空白処理に因り［除去／縮約］されなかった空白は、保全空白と呼ばれる。

注記： 行の末尾にある［保全空白／その他のスペース分離子］は、一部の事例ではぶら下がることもあり、［内在的サイズ法のために測定されるかどうか］に影響し得る。

次の一覧（参考）に、各種 white-space 値のふるまいを要約する：

¶以下省く

テスト