記事内に商品プロモーションが含まれる場合があります
今回はCSSのwhite-spaceの使い方をまとめて解説します。複雑なウェブデザインをしているときには意外とよく使うので、マスターしておくと良いでしょう。
CSSのwhite-spaceとは？
CSSのプロパティの１つです。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）をいくつか入れてみました。これが「ブラウザでどう表示されるか」というのがポイントなわけですね。
CSS
p {
white-space: normal;
width:100px;
background:skyblue
}
normalだとEnterで改行したり、半角を入力したりしても、1つの空白にまとまってしまうわけですね。
上の例では、CSSにwhite-space: normalと書きましたが、normalは初期値なので、何も指定しなかった場合も同じように表示されます。
nowrap（折り返しなし）
nowrapだと以下のようになります。normalとの違いは「行が折り返されない」という点です。
- 連続した改行や半角スペースは1つの空白にまとめられる
<br>を使わない限り、行は折り返されない- 文末の半角スペースや改行などは基本的に無視される
また例を見てみましょう。HTMLコードはさきほどの例と同じです。
CSS
p {
white-space: nowrap;
width:100px;
background:skyblue
}
brで改行していないため、文章は右端に達しても自動で折り返されません。そのため、要素の幅以上の文だと、はみ出てしまうわけですね。
はみ出た部分の扱いについて
はみ出た部分をどうやって表示させるのかはoverflowプロパティにより指定します。たとえばoverflow:hiddenと指定するとはみ出た部分は非表示になります。またoverflow:scrollと指定するとはみ出た部分がスクロール表示できるようになります。詳しくはこちらの記事が参考になるはずです。
pre-line
次にpre-lineです。
- 連続した半角スペースやtabは1つの空白にまとめられる
- HTMLコード内の改行はそのまま反映される
ざっくりとまとめると「連続した半角スペースやtabは1つの空白文字にまとめられるものの、改行は反映される」ということですね。例を見てみましょう。
CSS
p {
white-space: pre-line;
width:100px;
background:skyblue
}
Enterによる改行が、実際の表示にも反映されるわけですね。連打しても、その分だけ改行されることになります。
preとは
「pre」と「pre-wrap」はHTMlコードでの改行や半角スペースが、ブラウザでの表示にそのまま反映されます。まずwhite-space:preの特徴を見てみましょう。
- HTML内の改行や半角スペースがブラウザ表示にそのまま反映される
- 自動で行が折り返されることはない
同様に例を見てみましょう。
CSS
p {
white-space: pre;
width:100px;
background:skyblue
}
改行や半角スペースが入力した分だけ反映されるため、便利ですね。とはいえ、要素から文がはみ出てしまうのは場合によっては厄介ですね。そこで便利なのが次に紹介するpre-wrapです。
pre-wrap
最後にpre-wrapです。なかなか便利なので覚えておくと良いでしょう。特徴は以下のようになります。
- 改行や半角スペースがブラウザ表示にそのまま反映
- 要素の端で行が折り返される
これも例を見てみるのが分かりやすいですね。
CSS
p {
white-space: pre-wrap;
width:100px;
background:skyblue
}
入力したものがそのまま反映される上、はみ出ることがないため便利ですね。
最後に
いきなり全て覚えるのは難しいと思うので、ひとまず「こういう値があるんだな」程度に頭に入れておき、実際に使うときに調べ直すのがベストでしょう。
