1. TOP
  2. リファレンス
  3. cssのwhite-spaceの使い方! nowrapやnormalについて解説

cssのwhite-spaceの使い方! nowrapやnormalについて解説

white-spaceプロパティは、HTML内の半角スペース、タブ、改行をどのように表示するかを決めるためのプロパティです。

具体的には、以下の3点についてを設定することができます。

  • ホワイトスペース(連続する半角スペース・タブ)を1つにまとめるかどうか?
  • HTML内の改行を表示上も反映させるかどうか?
  • ボックスの端で文章を自動で折り返すかどうか?

文字で読んでもあまり想像がつかないと思いますので、様々な設定による変化をみていきましょう。

white-spaceの使い方

white-spaceプロパティを使うには下記のように記述します。

white-space: [値]

値は以下のキーワードから選択します。

normal 初期値

  • ホワイトスペース(連続する半角スペース・タブ)を1つにまとめる
  • 改行を1つの半角スペースとして表示する
  • ボックスの端で文章を自動で折り返す

nowrap

  • ホワイトスペース(連続する半角スペース・タブ)を1つにまとめる
  • 改行を1つの半角スペースとして表示する
  • ボックスの端で文章を自動で折り返さない

pre

  • ホワイトスペース(連続する半角スペース・タブ)をそのまま表示
  • 改行をそのまま表示
  • ボックスの端で文章を自動で折り返さない

pre-wrap

  • ホワイトスペース(連続する半角スペース・タブ)をそのまま表示
  • 改行をそのまま表示
  • ボックスの端で文章を自動で折り返す

pre-line

  • ホワイトスペース(連続する半角スペース・タブ)を1つにまとめる
  • 改行をそのまま表示
  • ボックスの端で文章を自動で折り返す
※ここでいう「改行」とは、HTMLコード内で改行した場合を指します。<br>タグのことではないので注意しましょう。
<br>タグを使って改行を指定している場合は、どのケースも改行されます。

normal(初期値)

normalは初期値です。white-spaceを変えない限りこの値が適用されています。特徴は以下の通りです。

  • ホワイトスペース(連続する半角スペース・タブ)を1つにまとめる
  • 改行を1つの半角スペースとして表示する
  • ボックスの端で文章を自動で折り返す

HTMLでは、コード内で改行してもブラウザでの表示上は改行されないという特徴がありますが、それは初期値でこの値が指定されていたからなんですね。

実際の例を見てみましょう。

<p id="demo_224">
 あいうえお
 かき     くけこ
 さしすせそ
 たちつてと
 なにぬねの
 </p>
 #demo_224{
   white-space:normal;
   background-color: tomato;
   width: 120px;
   height: 80px;
 }
 

あいうえお かき くけこ さしすせそ たちつてと なにぬねの

改行やホワイトスペース(連続する半角スペース・タブ)が1つの半角スペースになり、ボックスの端で折り返されていのがわかります。

nowrap

nowrapを指定した場合以下のようになります。

  • ホワイトスペース(連続する半角スペース・タブ)を1つにまとめる
  • 改行を1つの半角スペースとして表示する
  • ボックスの端で文章を自動で折り返さない

normalを指定した場合と似ていますが、normalと違い折り返さないのが特徴です。

実例を見てみましょう。

 <p id="demo_225">
 あいうえお
 かき     くけこ
 さしすせそ
 たちつてと
 なにぬねの
 </p>
 #demo_225{
   white-space:nowrap;
   background-color: tomato;
   width: 120px;
   height: 80px;
 }

あいうえお かき くけこ さしすせそ たちつてと なにぬねの

ボックスを超えても自動では折り返されず、文字がはみだしています。brタグで指定しない限り、改行はされません。

はみ出した部分の調整

自動折り返しをせず、はみ出した部分はovreflowプロパティで調整出来ます。

overflowを使うことで、はみ出した部分を消したり、スクロール表示させたりするなどの指定が可能です。

overflowについてはこちらの記事で解説しているので参考にしてください。

pre

preを指定した場合、下記のようになります。

  • ホワイトスペース(連続する半角スペース・タブ)をそのまま表示
  • 改行をそのまま表示
  • ボックスの端で文章を自動で折り返さない

実例を見てみましょう。

 <p id="demo_226">
 あいうえお
 かき     くけこ
 さしすせそ
 たちつてと
 なにぬねの
 </p>
 #demo_226{
   white-space:pre;
   background-color: tomato;
   width: 50px;
   height: 80px;
 }

あいうえお かき くけこ さしすせそ たちつてと なにぬねの

このように、HTML内の改行やスペースがそのまま表示されます。自動での折返しはありません。

pre-wrap

pre-wrapを指定した場合、下記のようになります。

  • ホワイトスペース(連続する半角スペース・タブ)をそのまま表示
  • 改行をそのまま表示
  • ボックスの端で文章を自動で折り返す

実例を見てみましょう。

 <p id="demo_227">
 あいうえお
 かき     くけこ
 さしすせそ
 たちつてと
 なにぬねの
 </p>
#demo_227{
   white-space:pre-wrap;
   background-color: tomato;
   width: 50px;
   height: 80px;
 }

あいうえお かき くけこ さしすせそ たちつてと なにぬねの

preのときと似ていますが、ボックスの端で文章を自動で折り返す 点が違います。

pre-line

pre-lineを指定した場合、下記のようになります。

  • ホワイトスペース(連続する半角スペース・タブ)を1つにまとめる
  • 改行をそのまま表示
  • ボックスの端で文章を自動で折り返す

実例を見てみましょう。

 <p id="demo_228">
 あいうえお
 かき     くけこ
 さしすせそ
 たちつてと
 なにぬねの
 </p>
 #demo_228{
   white-space:pre-line;
   background-color: tomato;
   width: 50px;
   height: 80px;
 }

あいうえお かき くけこ さしすせそ たちつてと なにぬねの

pre-wrapと似ていますが、ホワイトスペース(連続する半角スペース・タブ)を1つにまとめる点が違います。