CSSリファレンス

実践向けCSSリファレンス

空白文字の取り扱いを指定するCSSプロパティ white-space

white-space の概要

CSSプロパティ「white-space」によって、その要素内の「空白文字」をどのように扱うかを定義できます。空白文字とは「半角スペース」「タブ」「改行」などの総称です。

もし、半角のアルファベットで記載された1つの英単語が、途中で改行されるかどうかをコントロールしたいときは、white-spaceでなく、overflow-wrap, word-break, もしくは、hyphenを使って下さい。これらのプロパティはしばしば混同され、混乱の元になっています。

取りうる値

white-spaceプロパティの値によって「2つ以上の連続する空白文字をどのように取り扱うか」や、「文字列が要素の縁に到達した際に自動的に折り返すか」「改行コードで改行するか」の振る舞いの組み合わせを指定できます。

「pre」は、英語の「preserve(保持する)」の頭文字3文字である事を念頭に置くと、振る舞いがイメージしやすいでしょう。

説明
normal2つ以上の空白文字は1つに統合されます。改行コードは他の空白文字と同様に扱われます。長い文字列が、要素の縁に到達すると、自動的に折り返し(改行)が発生します。
nowrapnormalと同じように、連続する空白文字は1つに統合します。ただし、自動的な折り返しは発生しません。
pre連続する空白文字は統合されず、そのまま保持されます。ソースの文字列内に存在する改行コードか、<br>タグによって改行されます。
pre-wrap連続する空白文字は統合されず、そのまま保持されます。長い文字列が、要素の縁に到達すると、自動的に折り返し(改行)が発生します。
pre-line連続する空白文字は統合されます。ソースの文字列内に存在する改行コードか、<br>タグによって改行されます。

シンプルな表にまとめると、下記のようになります。

改行コード連続するスペースとタブテキストの折り返し
normal空白文字とみなす1つに統合折り返す
nowrap空白文字とみなす1つに統合無し
pre改行するそのまま無し
pre-wrap改行するそのまま折り返す
pre-line改行する1つに統合折り返す

使用例

改行コードの有効に関わらず、要素の最後の改行(改行コード、brタグ問わず)は無視される事に注意して下さい。なお、HTMLのpreタグは、通常のブラウザではデフォルトで「white-space: pre」の値を取っています。

<p class="normal">
  normalはデフォルトの振る舞いです。
  連続する空白文字が1つに統合されます。
  長いテキストは自動で折り返します。長ーーーーーーーーーーーーーーーーーーーい。
  改行コードはただの空白文字として取り扱います。
</p>
<p class="nowrap">
  nowrapは、連続する空白文字を1つに統合されます。
  長いテキストを自動的に折り返しません。長ーーーーーーーーーーーーーーーーーーーい。
  改行コードはただの空白文字として取り扱います。
</p>
<p class="pre">
  preはすべての空白文字を保持します。
  長いテキストを折り返しません。長ーーーーーーーーーーーーーーーーーーーい。
  改行コードで改行します。
</p>
<p class="pre-wrap">
  pre-lineはすべての空白文字を保持します。
  長いテキストは自動で折り返します。長ーーーーーーーーーーーーーーーーーーーい。
  改行コードで改行します。
</p>
<p class="pre-line">
  pre-wrapは連続する空白文字を1つに統合します。
  長いテキストを自動で折り返します。長ーーーーーーーーーーーーーーーーーーーい。
  改行コードで改行します。
</p>

<style>
p {
  font-size:12px;
  background-color: #fec;
  margin:10px 0;
}
.normal{
  white-space: normal;
}
.nowrap{
  white-space: nowrap;
}
.pre{
  white-space: pre;
}
.pre-wrap{
  white-space: pre-wrap;
}
.pre-line{
  white-space: pre-line;
}
</style>

関連リンク

  • text-indent
  • text-align
  • text-align-last
  • text-decoration
  • text-justify
  • text-overflow
  • text-shadow
  • text-transform
  • white-space

関連CSSプロパティ

閉じる