シュウ

今回は【CSS】white-spaceを解説！ スペース・タブ・改行の表示方法
についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• white-space(ホワイトスペース)の使い方について学びたい方へ
• normal、nowrap、pre-line、pre、pre-wrap5つの指定を学ぼう！

white-spaceプロパティは、要素内の半角スペース、タブ（tab）、改行をどのように表示するかを
指定するプロパティになります。

white-spaceについて

white-spaceとは、要素内の半角スペース、タブ（tab）、改行の表示を指定します。
書き方は以下のようになります。

/*--white-space--*/
要素 {white-space: 値;}

normalについて

white-space:normalとは、以下にまとめられます。

連続する半角スペース、タブ（tab）を1つにまとめられる
改行を1つの半角スペースとして表示します
要素幅で自動的に折返しされる

<p>赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>

p {
	width: 200px;
	background-color: #fd6158;
	
	/*--normalを指定--*/
	white-space: normal;
}

このように、normalだと、改行、半角スペース、タブ（tab）は１つにまとめられる。
また、要素幅いっぱいまでくると行が自動で改行されます。

nowrapについて

white-space:nowrapとは、以下にまとめられます。

連続する半角スペース、タブ（tab）を1つにまとめられる
改行を1つの半角スペースとして表示します
要素幅で自動的に折返しされません、brを使わない限り、行は折り返されません。

<p>赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>

p {
	width: 200px;
	background-color: #fd6158;
	
	/*--nowrapを指定--*/
	white-space: nowrap;
}

このように、nowrapだと、要素幅で折返しされず、はみ出してしまいます。
またbrタグを使わない限り、改行はされません。

はみ出し部分について

はみ出し部分はovreflowプロパティを指定する事で、はみ出した部分を非表示、スクロールの指定が
可能になります。

ovreflowの記事

【CSS】overflowの使い方 hidden、scrollの指定方法など

overflow：hidden、scrollの違い、使い方についての記事になります。

pre-lineについて

white-space:pre-lineとは、以下にまとめられます。

連続する半角スペース、タブ（tab）を1つにまとめられる
改行はそのまま表示されます
要素幅で自動的に折返しされる

<p>
赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>

p {
	width: 200px;
	background-color: #fd6158;
	
	/*--pre-lineを指定--*/
	white-space: pre-line;
}

このように、pre-lineだと、改行がブラウザ上で実際に表示され、複数の改行を入れた場合は、
その分だけ改行されます。

preについて

white-space:preとは、以下にまとめられます。

連続する半角スペース、タブ（tab）をそのまま表示します
改行はそのまま表示されます
要素幅で自動的に折返しされません

<p>
赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>

p {
	width: 200px;
	background-color: #fd6158;
	
	/*--preを指定--*/
	white-space: pre;
}

このように、preだと、改行、半角スペース、タブ（tab）はそのまま反映されます。
要素幅で折返しされず、はみ出してしまいます。brタグを使わない限り、改行はされません。

pre-wrapについて

white-space:pre-wrapとは、以下にまとめられます。

連続する半角スペース、タブ（tab）をそのまま表示します
改行はそのまま表示されます
要素幅で自動的に折返しされる

<p>
赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>

p {
	width: 200px;
	background-color: #fd6158;
	
	/*--pre-lineを指定--*/
	white-space: pre-line;
}

このように、pre-wrapだと、半角スペース、タブ（tab）はそのまま反映されます。
要素幅いっぱいまでくると行が自動で改行されます。

まとめ

今回はこれで以上です。

< 前の記事

【CSS】display:inline-blockとnoneの使い方を解説！

次の記事 >

【CSS】overflow-wrapを解説！ 単語の途中での改行を指定する！