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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

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

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

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[超初心者] HTMLのタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …