CSS

The CSS `white-space` property is used to specify how whitespace and line breaks are handled within an element, as well as how text wrapping is managed.

white-space

　CSSの white-spaceプロパティは、要素内の空白文字（スペースや改行など）の取り扱いを制御するために使用されます。

normal

デフォルト値です。連続する空白は1つにまとめられ、行は必要に応じて折り返されます。

通常のテキスト表示に使用されます。

nowrap

連続する空白は1つにまとめられますが、行の折り返しは行われません。

ボタンやリンクのテキストが1行で表示されるようにする場合に使用されます。

pre

空白や改行がそのまま保持されます。テキストは折り返されません。

コードブロックなど、フォーマットされたテキストを表示する場合に使用されます。

pre-wrap

空白や改行がそのまま保持され、必要に応じて行が折り返されます。

ユーザーが入力したテキストをそのまま表示しつつ、レイアウトが崩れないようにする場合に使用されます。

pre-line

連続する空白は1つにまとめられますが、改行はそのまま保持され、必要に応じて行が折り返されます。

テキストエリアなどで、ユーザーの入力を適度に整形して表示する場合に使用されます。

　これにより、テキストの表示を適切に制御することができます。

Sample

normal を指定

　連続する空白は1つにまとめられ、行は必要に応じて折り返されます。

<p class="sample">
　white-spaceプロパティは、
	・ソース中のホワイトスペース（連続する半角スペース・タブ）
	・改行
の表示方法を指定する際に使用します。
</p>

.sample {
	background-color: palegreen;
	white-space: normal;
	width: 200px;
}

nowrap を指定

　連続する空白は1つにまとめられますが、行の折り返しは行われません。

<p class="sample">
　white-spaceプロパティは、
	・ソース中のホワイトスペース（連続する半角スペース・タブ）
	・改行
の表示方法を指定する際に使用します。
</p>

.sample {
	background-color: palegreen;
	white-space: nowrap;
	width: 200px;
}

pre を指定

　空白や改行がそのまま保持されます。テキストは折り返されません。

<p class="sample">
　white-spaceプロパティは、
	・ソース中のホワイトスペース（連続する半角スペース・タブ）
	・改行
の表示方法を指定する際に使用します。
</p>

.sample {
	background-color: palegreen;
	white-space: pre;
	width: 200px;
}

pre-wrap を指定

　空白や改行がそのまま保持され、必要に応じて行が折り返されます。

<p class="sample">
　white-spaceプロパティは、
	・ソース中のホワイトスペース（連続する半角スペース・タブ）
	・改行
の表示方法を指定する際に使用します。
</p>

.sample {
	background-color: palegreen;
	white-space: pre-wrap;
	width: 200px;
}

pre-line を指定

　連続する空白は1つにまとめられますが、改行はそのまま保持され、必要に応じて行が折り返されます。

<p class="sample">
　white-spaceプロパティは、
	・ソース中のホワイトスペース（連続する半角スペース・タブ）
	・改行
の表示方法を指定する際に使用します。
</p>

.sample {
	background-color: palegreen;
	white-space: pre-line;
	width: 200px;
}