white-spaceプロパティの説明
CSSの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の値を変えた場合の比較です。
<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>
.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;
}