カテゴリー: white-space

（例）【CSS】white-spaceの使用方法

See the Pen
white-space by linlin (@linlin098765)
on CodePen.

<h5>white-space: normal;</h5>
<p class="sample" style="white-space: normal;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>

<h5>white-space: pre;</h5>
<p class="sample" style="white-space: pre;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>

<h5>white-space: nowrap;</h5>
<p class="sample" style="white-space: nowrap;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>

<h5>white-space: pre-wrap;</h5>
<p class="sample" style="white-space: pre-wrap;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>

<h5>white-space: pre-line;</h5>
<p class="sample" style="white-space: pre-line;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>

p.sample {
	width:200px;
	background-color:gray;
}

【CSS】white-space：スペース・改行方法の調整

　CSSのwhite-spaceは、ソース中のスペース・改行の表示方法を指定するプロパティです。

• normal
  スペースを無視。改行を半角スペースに指定（初期値）
  ボックスサイズによっては自動改行。
• pre
  スペース・改行をそのまま表示。
  ボックスサイズによらず自動改行しない。
• nowrap
  スペースを無視。改行を半角スペースに指定。
  ボックスサイズによらず自動改行しない。
• pre-wrap
  スペース・改行をそのまま表示。
  ボックスサイズによっては自動改行。
• pre-line
  スペースを無視。改行はそのまま表示。
  ボックスサイズによっては自動改行。