CODING

[CSS] white-spaceの使い方/空白・改行

投稿日:


どうも、べ〜やんです。

今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。





white-spaceとは

white-spaceとはHTMLに書いた半角スペースや改行(Enter)をどのように表示させるのかを指定するCSSのプロパティです。

<p>半角スペース   や改行を

        どのように表示させるのか?  </p>

値は5つ

white-space: normal; /* 空白文字にまとめる・自動折り返し(デフォルト) */
white-space: nowrap; /* 空白文字にまとめる・自動折り返しなし */
white-space: pre;      /* 空白/改行をそのまま表示・自動折り返しなし */
white-space: pre-wrap; /* 空白/改行をそのまま表示・自動折り返し */
white-space: pre-line; /* 改行をそのまま表示・自動折り返し */

white-space: normal;

white-space: normal;はデフォルトの値で、連続した半角スペースや改行(Enter)を1つの半角スペースにまとめ、文末の半角スペースや改行は無視。要素の端で自動改行。

p {
  white-space: normal;
  width: 200px;
  background-color: #F89174;
}
white-space: normal;

white-space: nowrap;

white-space: nowrap;は連続した半角スペースや改行(Enter)を1つの半角スペースにまとめ、文末の半角スペースや改行は無視。要素の端で自動改行しない。

p {
  white-space: nowrap;
  width: 200px;
  background-color: #F89174;
}
white-space: nowrap;

white-space: pre;

white-space: pre;は半角スペースや改行(Enter)をそのまま表示。要素の端で自動改行しない。

p {
  white-space: pre;
  width: 200px;
  background-color: #F89174;
}
white-space: pre;

white-space: pre-wrap;

white-space: pre-wrap;は半角スペースや改行(Enter)をそのまま表示。要素の端で自動改行。

p {
  white-space: pre-wrap;
  width: 200px;
  background-color: #F89174;
}
white-space: pre-wrap;

white-space: pre-line;

white-space: pre-line;は連続した半角スペースを1つにまとめる、改行(Enter)をそのまま表示。要素の端で自動改行。

p {
  white-space: pre-line;
  width: 200px;
  background-color: #F89174;
}
white-space: pre-line;

改行タグ

改行(Enter)をひとまとめにするnormalnowrapであっても改行タグの<br>を使えば改行させることができます。

<p>半角スペース   や改行を<br>
    <br>
    どのように表示させるのか?  </p>
p {
  white-space: nowrap;
  width: 200px;
  background-color: #F89174;
}
white-space: nowrap;<br>で改行

はみだした部分はどうする?

自動折り返しなしの値など要素からはみだして表示されてしまう場合などに便利なプロパティのoverflowも紹介しています。

[CSS] overflowの使い方


おわりに


今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介しました。



-CODING
-,

執筆者:


comment

関連記事

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[CSS] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …