【white-space】空白文字と折返し設定

<div style="white-space: normal;width: 200px;border: solid 1px gray;">
     white-spaceは 	空白文字や
	
    折返しの設定をするプロパティです。
</div>

normalは連続したスペースが、半角スペース1つ分にまとめられて表示されます。

幅がいっぱいになると自動的に折り返します。

<div style="white-space: nowrap;width: 200px;border: solid 1px gray;">
     white-spaceは 	空白文字や
	
    折返しの設定をするプロパティです。
</div>

nowrapは連続したスペースが、半角スペース1つ分にまとめられて表示されます。

幅がいっぱいになっても自動的に折り返さず、ボックスの幅を超えて表示されます。

<div style="white-space: pre;width: 200px;border: solid 1px gray;">
     white-spaceは 	空白文字や
	
    折返しの設定をするプロパティです。
</div>

preはインデント(字下げ)も含めて、連続したスペースをそのまま表示します。

幅がいっぱいになっても自動的に折り返さず、ボックスの幅を超えて表示されます。

<div style="white-space: pre-wrap;width: 200px;border: solid 1px gray;">
     white-spaceは 	空白文字や
	
    折返しの設定をするプロパティです。
</div>

pre-wrapはインデント(字下げ)も含めて、連続したスペースをそのまま表示します。

幅がいっぱいになると自動的に折り返します。

<div style="white-space: pre-line;width: 200px;border: solid 1px gray;">
     white-spaceは 	空白文字や
	
    折返しの設定をするプロパティです。
</div>

pre-lineは連続したスペース・タブもそのまま表示されますが、改行はそのまま表示されます。

幅がいっぱいになると自動的に折り返します。