white-spaceプロパティ

プロパティwhite-spaceは、テキストを新しい行にどのように折り返すか、また単語間のスペースや改行（コード入力時に Enterキーが押された箇所）をどのように表示するかを設定します。

構文

セレクタ {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

値

値	説明
`nowrap`	コンテナの幅に収まらない場合でも、テキストが別の行に折り返されることを禁止します（この場合、テキストは単に境界線をはみ出します）。ただし、`br`タグを追加すると、テキストは新しい行に折り返されます。
`pre`	テキストは、サイトをマークアップする際のエディタで入力された通りに表示されます：すべてのスペースと Enter（コード内に複数のスペースがあれば、画面上でも複数表示されます）。このとき、ブラウザはコンテナに収まらない場合でもテキストを新しい行に折り返さず、テキストは境界線をはみ出します。 preタグのアナログですが、それとは異なり、フォントを等幅フォントに変更しません（等幅フォントについては、 `font-family`プロパティを参照してください。
`pre-wrap`	preと同じですが、違いは、テキストが長すぎてコンテナに収まらない場合、ブラウザがそれを別の行に折り返す点です。
`pre-line`	ブラウザはHTMLコード内のEnterのみを考慮し、その他すべてを無視します（複数のスペースは1つとして表示され、ブラウザ自身が改行位置を決定します）。
`normal`	標準の動作：ブラウザは単語がコンテナに収まるように自動的に改行位置を決定します。コード内の複数のスペースは、画面上では1つとして表示されます。

デフォルト値：normal。

例 . nowrap値

この例では、nowrap値が設定されているため、テキストはコンテナに収まらず、境界線をはみ出します：

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

例 . nowrap値とbrタグ

brタグを追加すると、テキストは新しい行に折り返されます（brが置かれている正確な位置で）：

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

例 . pre値

この例では、テキストは HTMLコードエディタで入力された通りに表示されます（Tabキーによるインデント、 Enterなどすべて含めて）：

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

例 . pre-wrap値

次に、テキストはHTMLコードエディタで入力された通りに表示されますが、はみ出した部分は新しい行に折り返されます：

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

white-spaceプロパティ

構文

値

例 . nowrap値

例 . nowrap値とbrタグ

例 . pre値

例 . pre-wrap値

関連項目