【CSS】white-spaceの使い方:pre、wrap、nowrapなどの違いは?

white-spaceの使い方まとめ

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

CSSのwhite-spaceとは?

white-spaceとは?

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

よく分からないかと思いますが、後ほど1つずつ解説していきます。
CSSでのwhites-spaceの書き方は以下のようになります。

◯◯ {white-space: 値;}

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

white-spaceで指定できる値

◯◯ {white-space:}の値に対しては、以下の5つのどれかを指定します。

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

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

サルワカくんの顔(通常)
サルワカくん

いきなりこの表を見せられてもいまいちピンと来ないと思うので、1つずつ例を見ていきましょう。

white-space: normalとは

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

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

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

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

white-space:normalの場合

normalだとEnterで改行したり、半角を入力したりしても、1つの空白にまとまってしまうわけですね。

サルワカくんの顔(通常)
サルワカくん

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

white-space: nowrap(折り返しなし)

nowrapだと以下のようになります。normalとの違いは「行が折り返されない」という点です。

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

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

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

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

brで改行していないため、文章は右端に達しても自動で折り返されません。そのため、要素の幅以上の文だと、はみ出てしまうわけですね。

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

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

white-space: pre-line

次にpre-lineです。

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

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

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

pre-lineの表示例

Enterによる改行が、実際の表示にも反映されるわけですね。連打しても、その分だけ改行されることになります。

white-space: 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です。

white-space: pre-wrap

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

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

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

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

white-space:pre-wrapの例

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

最後に

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

サルワカ