CSS
初心者

CSSのwhite-spaceを使いこなそう

最近、white-spaceを使うことが多くなったので、備忘録としてまとめておきます。

誤りや不足などありましたら、コメントいただけると大変助かります。

そもそもwhite-spaceとは

CSSのプロパティの一つです。
HTMLコード内の半角スペースやタブ、改行をブラウザでどのように表示させるかを指定します。

実際に使ってみる

cssでの書き方は以下になります。
white-space: <値>

指定できる値は、以下の5つになります。

  • normal (初期値)
  • nowrap
  • pre-line
  • pre
  • pre-wrap

それぞれ一つずつ説明していきます。

white-space:normal (初期値)

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

white-space:nowrap

white-space:normal (初期値)とは異なり、「行の折り返しがない」です。

  • 連続した複数の改行や半角スペースは一つの空白にまとめられる
  • 要素の右側で行が折り返されない、<br>を使えば折り返すことは可能
  • 文末の半角スペース、改行、tabは基本的に無視される

折り返されずにはみ出た部分は、overflowプロパティで指定することができます。
overflow:hiddenに指定すると、はみ出た部分は非表示になり、
overflow:scrollに指定すると、はみ出た部分はスクロール表示になります。

white-space:pre-line

white-space:normal (初期値)と同じく、連続した複数の改行や半角スペースは一つの空白にまとめられるが、改行は反映される特徴を持ちます。

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

white-space:pre

これまでとは異なり、HTMLコードでの改行や半角スペースがブラウザでそのまま表示されます。

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

white-space:pre-wrap

white-space:preと同じく、HTMLコードでの改行や半角スペースがブラウザでそのまま表示され、自動で行が折り返されます。

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

各ブラウザの対応状況

2018/01/09現在だと、IEとEdgeが...
Can I use 'white-space'