CSSのwhite-spaceの意味と使い方を総まとめ!

white-spaceの使い方まとめ

今回はCSSのwhite-spaceの使い方をまとめて解説します。複雑なウェブデザインをしているときには意外とよく使うので、マスターしておくと良いでしょう。

1. white-spaceとは?

white-spaceとは?

CSSのプロパティの1つです。HTMLコード内の半角スペース、タブ、改行をブラウザでどのように表示させるかを決めます。 プロパティとは?

書き方は以下のようになります。

◯◯ {white-space: 値;}

◯◯の部分には、他のプロパティと同じようにタグ名やclass名、id名などのセレクタが入ります。

指定できる値

値は以下の5つのどれかを指定します。

値名 改行などの反映 行の折り返し
normal初期値 HTMLコード内で改行(enter)や半角スペース、タブが連続入力されても、ブラウザ表示では1つの空白文字にまとめられる 自動で折り返し
nowrap 折り返しされない
pre-line 連続で並ぶ半角スペースやtabは1つの空白文字にまとまるが、改行(enter)は反映される 自動で折り返し
pre 連続で入力した空白や改行がブラウザでの表示に反映される 折り返しされない
pre-wrap 自動で折り返し

「行の折り返し」というのは「文字が要素のボックス端で、次の行へと自動で折り返されるかどうか」を示しています(どれも<br>を使えば、好きな位置で改行させることはできます)。いきなりこの表を見せられてもいまいちピンと来ないと思うので、1つずつ例を見ていきましょう。

2. normal

white-space:normalを指定した場合は以下のようになります。

  • 連続した改行や半角スペースは1つの空白にまとめられる
  • 要素の右端で行が折り返し
  • 文末の半角スペースや改行、tabなどは基本的に無視される

実際に例を見てみましょう。例文のHTMLコード内には改行や半角スペース、タブ(tab)をいくつか入れてみました。これが「ブラウザでどう表示されるか」というのがポイントなわけですね。

HTML HTMLコード例 CSS
p {
	white-space: normal;
	width:100px;
	background:skyblue
}
ブラウザ表示

white-space:normalの場合

上の例では、CSSにwhite-space: normalと書きましたが、normalは初期値なので、何も指定しなかった場合も同じように表示されます。

3. nowrap(折り返しなし)

nowrapだと以下のようになります。

  • 連続した改行や半角スペースは1つの空白にまとめられる
  • <br>を使わない限り、行は折り返されない
  • 文末の半角スペースや改行などは基本的に無視される

また例を見てみましょう。HTMLコードはさきほどの例と同じです。

HTML HTMLコード例 CSS
p {
	white-space: nowrap;
	width:100px;
	background:skyblue
}
ブラウザ表示

white-space:nowrapを指定した場合の例

要素の幅以上の文だと、はみ出てしまうわけですね。

はみ出た部分の扱いについて

はみ出た部分をどうやって表示させるのかはoverflowプロパティにより指定します。たとえばoverflow:hiddenと指定するとはみ出た部分は非表示になります。またoverflow:scrollと指定するとはみ出た部分がスクロール表示できるようになります。詳しくはこちらの記事が参考になるはずです。

4. pre-line

次にpre-lineです。

  • 連続した半角スペースやtabは1つの空白にまとめられる
  • HTMLコード内の改行はそのまま反映される

ざっくりとまとめると「連続した半角スペースやtabは1つの空白文字にまとめられるものの、改行は反映される」ということですね。例を見てみましょう。

HTML HTMLコード例 CSS
p {
	white-space: pre-line;
	width:100px;
	background:skyblue
}
ブラウザ表示

pre-lineの表示例

5. pre

「pre」と「pre-wrap」はHTMlコードでの改行や半角スペースが、ブラウザでの表示にそのまま反映されます。まずwhite-space:preの特徴を見てみましょう。

  • HTML内の改行や半角スペースがブラウザ表示にそのまま反映される
  • 自動で行が折り返されることはない

同様に例を見てみましょう。

HTML HTMLコード例 CSS
p {
	white-space: pre;
	width:100px;
	background:skyblue
}
ブラウザ表示

white-space:preの例

改行や半角スペースが入力した分だけ反映されるため、便利ですね。とはいえ、要素から文がはみ出てしまうのは場合によっては厄介ですね。そこで便利なのが次に紹介するpre-wrapです。

6. pre-wrap

最後にpre-wrapです。なかなか便利なので覚えておくと良いでしょう。特徴は以下のようになります。

  • 改行や半角スペースがブラウザ表示にそのまま反映
  • 要素の端で行が折り返される

これも例を見てみるのが分かりやすいですね。

HTML HTMLコード例 CSS
p {
	white-space: pre-wrap;
	width:100px;
	background:skyblue
}
ブラウザ表示

white-space:pre-wrapの例

入力したものがそのまま反映される上、はみ出ることがないため便利ですね。

最後に

いきなり全て覚えるのは難しいと思うので、ひとまず「こういう値があるんだな」程度に頭に入れておき、実際に使うときに調べ直すのがベストですね。

サルワカ