記事内に商品プロモーションが含まれる場合があります
今回はCSSのwhite-spaceの使い方をまとめて解説します。複雑なウェブデザインをしているときには意外とよく使うので、マスターしておくと良いでしょう。
CSSのwhite-spaceとは？
CSSのプロパティの１つです。HTMLコード内の半角スペース、タブ、改行をブラウザでどのように表示させるかを決めます。 プロパティとは？
よく分からないかと思いますが、後ほど1つずつ解説していきます。
CSSでのwhite-spaceの書き方は以下のようになります。
.example { white-space: normal; }.exampleはclass="example"の要素を選ぶclassセレクタです。ほかにもタグ名やid名などのセレクタを使えます。
white-spaceで指定できる値
この記事では、次の代表的な5つの値を比較します。現在はbreak-spacesや、空白の縮約と折り返しを組み合わせる指定もあります。
| 値名 | 改行などの反映 | 行の折り返し |
|---|---|---|
| normal初期値 | 連続する半角スペースやtabは縮約される。改行（enter）は言語・文脈により空白へ変換または除去される | 自動で折り返し |
| nowrap | 折り返しされない | |
| pre-line | 連続で並ぶ半角スペースやtabは1つの空白文字にまとまるが、改行（enter）は反映される | 自動で折り返し |
| pre | HTML内の改行、半角スペース、tabを保存する | 折り返しされない |
| pre-wrap | 自動で折り返し |
「行の折り返し」というのは「文字が要素のボックス端で、次の行へと自動で折り返されるかどうか」を示しています（どれも<br>を使えば、好きな位置で改行させることはできます）。
white-space: normalとは
white-space:normalを指定した場合は以下のようになります。
- 連続する半角スペースやtabは縮約される。改行の変換は言語や文脈によって異なる
- 要素の幅に応じて自動で折り返す（分割点のない長い文字列は溢れる場合がある）
- 行頭・行末の縮約された半角スペースやtabは取り除かれる
実際に例を見てみましょう。例文のHTMLコード内には改行や半角スペース、タブ（tab）をいくつか入れてみました。これが「ブラウザでどう表示されるか」というのがポイントなわけですね。
以下のコピーコードは、改行2つ・行頭の半角スペース2つ・文の間の半角スペース1つ・末尾のtab2つを使った新しい比較例です。当時の図から元の入力を復元したものではありません。5例とも同じHTMLを使い、white-spaceの値だけを変えます。
<p class="white-space-example">これは例文です。
これは例文です。 これは例文です。 </p>.white-space-example {
white-space: normal;
width: 100px;
margin: 0;
background: skyblue;
font: 16px/1.5 sans-serif;
tab-size: 8;
}
normalは連続する半角スペースやtabを縮約します。Enterによる改行も変換されますが、日本語などの文脈では空白を挟まず取り除かれる場合もあります。
nowrap（折り返しなし）
nowrapだと以下のようになります。normalとの違いは「行が折り返されない」という点です。
- 連続する半角スペースやtabは縮約される。改行の変換は言語や文脈によって異なる
<br>などの明示的な改行は有効だが、自動では折り返されない- 行頭・行末の縮約された半角スペースやtabは取り除かれる
また例を見てみましょう。HTMLコードはさきほどの例と同じです。
<p class="white-space-example">これは例文です。
これは例文です。 これは例文です。 </p>.white-space-example {
white-space: nowrap;
width: 100px;
margin: 0;
background: skyblue;
font: 16px/1.5 sans-serif;
tab-size: 8;
}
brで改行していないため、文章は右端に達しても自動で折り返されません。そのため、要素の幅以上の文だと、はみ出てしまうわけですね。
はみ出た部分の扱いについて
はみ出た部分をどうやって表示させるのかはoverflowプロパティにより指定します。たとえばoverflow:hiddenと指定するとはみ出た部分は非表示になります。またoverflow:scrollと指定するとはみ出た部分がスクロール表示できるようになります。詳しくはこちらの記事が参考になるはずです。
pre-line
次にpre-lineです。
- 連続した半角スペースやtabは1つの空白にまとめられる
- HTMLコード内の改行はそのまま反映される
ざっくりとまとめると「連続した半角スペースやtabは1つの空白文字にまとめられるものの、改行は反映される」ということですね。例を見てみましょう。
<p class="white-space-example">これは例文です。
これは例文です。 これは例文です。 </p>.white-space-example {
white-space: pre-line;
width: 100px;
margin: 0;
background: skyblue;
font: 16px/1.5 sans-serif;
tab-size: 8;
}
Enterによる本文途中の改行は保存され、この例では内部の空行も表示されます。末尾の改行や周囲の余白まで、同じ数の見える空行になるとは限りません。
preとは
「pre」と「pre-wrap」はHTMLコードでの改行や半角スペース、tabを保存します。まずwhite-space:preの特徴を見てみましょう。
- HTML内の改行や半角スペース、tabを保存して表示する
- 自動で行が折り返されることはない
同様に例を見てみましょう。
<p class="white-space-example">これは例文です。
これは例文です。 これは例文です。 </p>.white-space-example {
white-space: pre;
width: 100px;
margin: 0;
background: skyblue;
font: 16px/1.5 sans-serif;
tab-size: 8;
}
改行や半角スペースを保存できて便利ですね。tabの表示幅はtab-sizeで決まるtab stopに揃い、ここでは8を指定しています。要素から文がはみ出る場合もあります。そこで便利なのが次に紹介するpre-wrapです。
pre-wrap
最後にpre-wrapです。なかなか便利なので覚えておくと良いでしょう。特徴は以下のようになります。
- 改行や半角スペース、tabを保存して表示する
- 要素の端で行が折り返される
これも例を見てみるのが分かりやすいですね。
<p class="white-space-example">これは例文です。
これは例文です。 これは例文です。 </p>.white-space-example {
white-space: pre-wrap;
width: 100px;
margin: 0;
background: skyblue;
font: 16px/1.5 sans-serif;
tab-size: 8;
}
入力した改行や空白を保存しながら、自動で折り返せるので便利ですね。ただし分割点のない長い文字列は溢れることがあり、行末の半角スペースやtabも箱の外に吊り下がる場合があります。長いURLなどを折り返す必要がある場合はoverflow-wrapも検討します。
最後に
いきなり全て覚えるのは難しいと思うので、ひとまず「こういう値があるんだな」程度に頭に入れておき、実際に使うときに調べ直すのがベストでしょう。