white-space：要素内のホワイトスペースの扱い方を指定する

white-spaceプロパティの説明

white-spaceは、要素内のホワイトスペースの扱い方を指定します。ホワイトスペースとは、空白を表す文字のことです。半角スペースやタブ、改行などが該当します。

このプロパティには、大きく分けて2つの機能があります。1つは、連続するホワイトスペースを詰めるか残すのかの制御。2つ目は、ホワイトスペースを含む文字列が自動折り返しの地点に達した場合の制御です。

例えば、ソースコードの中に半角スペースやタブが連続して書かれていた場合に、それを切り詰めて表示することができます。あるいは、一行のテキストが要素の端まで到達した時に、自動的に折り返すか、それとも<br>で改行されるまで折り返さないかを定義できます。

連続する改行をそのままブラウザに表示させるには、HTMLの<pre>タグで囲んで下さい。

white-spaceに指定できる値

normal

連続するホワイトスペースがまとめられます。ソースコード内の改行文字もホワイトスペースとして扱われます。行の端にコンテンツが到達した場合、自動的に折り返します。

nowrap

連続するホワイトスペースをまとめますが、自動の折り返しを行いません。

pre

連続するホワイトスペースをそのまま残します。ソースコード内に改行文字が含まれている箇所で改行しますが、自動の折り返しを行いません。

pre-wrap

連続するホワイトスペースをそのまま残します。ソースコード内に改行文字が含まれている箇所で改行し、自動的な折り返しも行います。

pre-line

連続するホワイトスペースは切り詰められて1つになります。ソースコード内に改行文字が含まれている箇所で改行し、自動的な折り返しも行います。

break-spaces

連続するホワイトスペースをそのまま残し、行末にあるものを含めて空間を占有します。ホワイトスペースの箇所でも自動的な折り返しが行われます。ホワイトスペースはコンテンツの空間を占有し、ボックスの寸法に影響を与えます。

white-spaceの使い方とサンプル

white-spaceプロパティの構文は以下の通りです。

/* キーワード値 */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* グローバル値 */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: unset;

white-spaceの実例

それでは実際にwhite-spaceプロパティの書き方を見ていきましょう。以下の例は、連続する半角スペースや改行を含むテキストを持つ段落に対して、white-spaceの値を変えた場合の比較です。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 1rem;
}
section > p {
	width: 10rem;
	margin: .5rem 0 0;
	padding: .5rem;
	border: 1px solid #999;
}
#ws_1 > p {
	white-space: normal;
}
#ws_2 > p {
	white-space: nowrap;
}
#ws_3 > p {
	white-space: pre;
}
#ws_4 > p {
	white-space: pre-wrap;
}
#ws_5 > p {
	white-space: pre-line;
}
#ws_6 > p {
	white-space: break-spaces;
}

<div class="samp_box">
	<section id="ws_1">
		<h1>white-space: normal;</h1>
		<p> Text text text text text. White space [          ]
		
		Text text text text text. White space [          ]</p>
	</section>
	<section id="ws_2">
		<h1>white-space: nowrap;</h1>
		<p> Text text text text text. White space [          ]
		
		Text text text text text. White space [          ]</p>
	</section>
	<section id="ws_3">
		<h1>white-space: pre;</h1>
		<p> Text text text text text. White space [          ]
		
		Text text text text text. White space [          ]</p>
	</section>
	<section id="ws_4">
		<h1>white-space: pre-wrap;</h1>
		<p> Text text text text text. White space [          ]
		
		Text text text text text. White space [          ]</p>
	</section>
	<section id="ws_5">
		<h1>white-space: pre-line;</h1>
		<p> Text text text text text. White space [          ]
		
		Text text text text text. White space [          ]</p>
	</section>
	<section id="ws_6">
		<h1>white-space: break-spaces;</h1>
		<p> Text text text text text. White space [          ]
		
		Text text text text text. White space [          ]</p>
	</section>
</div>