カテゴリー
CSS white-space

【CSS】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
    スペースを無視。改行はそのまま表示。
    ボックスサイズによっては自動改行。