white-space の概要
CSSプロパティ「white-space」によって、その要素内の「空白文字」をどのように扱うかを定義できます。空白文字とは「半角スペース」「タブ」「改行」などの総称です。
もし、半角のアルファベットで記載された１つの英単語が、途中で改行されるかどうかをコントロールしたいときは、white-spaceでなく、overflow-wrap, word-break, もしくは、hyphenを使って下さい。これらのプロパティはしばしば混同され、混乱の元になっています。
取りうる値
white-spaceプロパティの値によって「２つ以上の連続する空白文字をどのように取り扱うか」や、「文字列が要素の縁に到達した際に自動的に折り返すか」「改行コードで改行するか」の振る舞いの組み合わせを指定できます。
「pre」は、英語の「preserve（保持する）」の頭文字３文字である事を念頭に置くと、振る舞いがイメージしやすいでしょう。
| 値 | 説明 |
|---|---|
| normal | 2つ以上の空白文字は１つに統合されます。改行コードは他の空白文字と同様に扱われます。長い文字列が、要素の縁に到達すると、自動的に折り返し（改行）が発生します。 |
| nowrap | normalと同じように、連続する空白文字は１つに統合します。ただし、自動的な折り返しは発生しません。 |
| pre | 連続する空白文字は統合されず、そのまま保持されます。ソースの文字列内に存在する改行コードか、<br>タグによって改行されます。 |
| pre-wrap | 連続する空白文字は統合されず、そのまま保持されます。長い文字列が、要素の縁に到達すると、自動的に折り返し（改行）が発生します。 |
| pre-line | 連続する空白文字は統合されます。ソースの文字列内に存在する改行コードか、<br>タグによって改行されます。 |
シンプルな表にまとめると、下記のようになります。
| 改行コード | 連続するスペースとタブ | テキストの折り返し | |
| normal | 空白文字とみなす | １つに統合 | 折り返す |
| nowrap | 空白文字とみなす | １つに統合 | 無し |
| pre | 改行する | そのまま | 無し |
| pre-wrap | 改行する | そのまま | 折り返す |
| pre-line | 改行する | １つに統合 | 折り返す |
使用例
改行コードの有効に関わらず、要素の最後の改行（改行コード、brタグ問わず）は無視される事に注意して下さい。なお、HTMLのpreタグは、通常のブラウザではデフォルトで「white-space: pre」の値を取っています。
<p class="normal">
normalはデフォルトの振る舞いです。
連続する空白文字が１つに統合されます。
長いテキストは自動で折り返します。長ーーーーーーーーーーーーーーーーーーーい。
改行コードはただの空白文字として取り扱います。
</p>
<p class="nowrap">
nowrapは、連続する空白文字を１つに統合されます。
長いテキストを自動的に折り返しません。長ーーーーーーーーーーーーーーーーーーーい。
改行コードはただの空白文字として取り扱います。
</p>
<p class="pre">
preはすべての空白文字を保持します。
長いテキストを折り返しません。長ーーーーーーーーーーーーーーーーーーーい。
改行コードで改行します。
</p>
<p class="pre-wrap">
pre-lineはすべての空白文字を保持します。
長いテキストは自動で折り返します。長ーーーーーーーーーーーーーーーーーーーい。
改行コードで改行します。
</p>
<p class="pre-line">
pre-wrapは連続する空白文字を１つに統合します。
長いテキストを自動で折り返します。長ーーーーーーーーーーーーーーーーーーーい。
改行コードで改行します。
</p>
<style>
p {
font-size:12px;
background-color: #fec;
margin:10px 0;
}
.normal{
white-space: normal;
}
.nowrap{
white-space: nowrap;
}
.pre{
white-space: pre;
}
.pre-wrap{
white-space: pre-wrap;
}
.pre-line{
white-space: pre-line;
}
</style>