SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.22
  • CATEGORY
TITLE

【CSS】white-spaceを解説! スペース・タブ・改行の表示方法

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】white-spaceを解説! スペース・タブ・改行の表示方法
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • white-space(ホワイトスペース)の使い方について学びたい方へ
  • normal、nowrap、pre-line、pre、pre-wrap5つの指定を学ぼう!

white-spaceプロパティは、要素内の半角スペース、タブ(tab)、改行をどのように表示するかを
指定するプロパティになります。

white-spaceについて

white-spaceについて

white-spaceとは、要素内の半角スペース、タブ(tab)、改行の表示を指定します。
書き方は以下のようになります。

/*--white-space--*/
要素 {white-space: 値;}
指定できる値
  • normal(初期値)
    連続する半角スペース・タブなど空白文字が続くとき、半角スペース1文字分のスペースが空きます。
  • nowrap 「基本的にnormalと同じ」
    連続する半角スペース・タブなど空白文字は1文字分のスペースだけ空きます。
  • pre-line 「基本的にnormalと同じ」
    連続する半角スペース・タブなど空白文字は1文字分のスペースだけ空きます。
  • pre
    連続する半角スペース・タブなどはそのまま表示します。
  • pre-wrap 「基本的にpreと同じ」
    連続する半角スペース・タブなどはそのまま表示します。

normalについて

normalについて

white-space:normalとは、以下にまとめられます。

連続する半角スペース、タブ(tab)を1つにまとめられる
改行を1つの半角スペースとして表示します
要素幅で自動的に折返しされる

normalについて

赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。

<p>赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>
p {
	width: 200px;
	background-color: #fd6158;
	
	/*--normalを指定--*/
	white-space: normal;
}

このように、normalだと、改行、半角スペース、タブ(tab)は1つにまとめられる。
また、要素幅いっぱいまでくると行が自動で改行されます。

nowrapについて

nowrapについて

white-space:nowrapとは、以下にまとめられます。

連続する半角スペース、タブ(tab)を1つにまとめられる
改行を1つの半角スペースとして表示します
要素幅で自動的に折返しされません、brを使わない限り、行は折り返されません。

nowrapについて

赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。

<p>赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>
p {
	width: 200px;
	background-color: #fd6158;
	
	/*--nowrapを指定--*/
	white-space: nowrap;
}

このように、nowrapだと、要素幅で折返しされず、はみ出してしまいます。
またbrタグを使わない限り、改行はされません。

はみ出し部分について

はみ出し部分はovreflowプロパティを指定する事で、はみ出した部分を非表示、スクロールの指定が
可能になります。

ovreflowの記事

overflow:hidden、scrollの違い、使い方についての記事になります。

pre-lineについて

pre-lineについて

white-space:pre-lineとは、以下にまとめられます。

連続する半角スペース、タブ(tab)を1つにまとめられる
改行はそのまま表示されます
要素幅で自動的に折返しされる

pre-lineについて

赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。

<p>
赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>
p {
	width: 200px;
	background-color: #fd6158;
	
	/*--pre-lineを指定--*/
	white-space: pre-line;
}

このように、pre-lineだと、改行がブラウザ上で実際に表示され、複数の改行を入れた場合は、
その分だけ改行されます。

preについて

preについて

white-space:preとは、以下にまとめられます。

連続する半角スペース、タブ(tab)をそのまま表示します
改行はそのまま表示されます
要素幅で自動的に折返しされません

preについて

赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。

<p>
赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>
p {
	width: 200px;
	background-color: #fd6158;
	
	/*--preを指定--*/
	white-space: pre;
}

このように、preだと、改行、半角スペース、タブ(tab)はそのまま反映されます。
要素幅で折返しされず、はみ出してしまいます。brタグを使わない限り、改行はされません。

pre-wrapについて

pre-wrapについて

white-space:pre-wrapとは、以下にまとめられます。

連続する半角スペース、タブ(tab)をそのまま表示します
改行はそのまま表示されます
要素幅で自動的に折返しされる

pre-wrapについて

赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。

<p>
赤色の特徴は
 ・情熱
 ・強さ
 ・生命力
 ・活動
 ・祝福  ・派手などあります。
</p>
p {
	width: 200px;
	background-color: #fd6158;
	
	/*--pre-lineを指定--*/
	white-space: pre-line;
}

このように、pre-wrapだと、半角スペース、タブ(tab)はそのまま反映されます。
要素幅いっぱいまでくると行が自動で改行されます。

まとめ

今回はこれで以上です。

POINT
  • white-spaceとは、要素内の半角スペース、タブ(tab)、改行の表示を指定します。
  • はみ出し部分はovreflowプロパティを指定する事で、はみ出した部分を非表示、スクロールの指定が可能になります。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top