white-space

white-space プロパティは、要素内の空白文字をどのように扱うかを定義します。

  • 初期値 normal
  • 適用対象 全要素
  • 継承 継承する
  • メディア visual
  • 計算値 指定値
  • アニメーションの可否 不可
  • 正規順序 形式文法で定義される一意のあいまいでない順序

構文

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

normal
連続する空白は詰められて 1 つになります。ソース内の改行文字も空白文字として扱われます。行ボックスを埋めるために、必要なら行を折り返します。
nowrap
normal と同じく空白を詰めますが、行の折り返しは行いません。
pre
連続する空白はそのまま残され、行の折り返しは、ソース内の改行文字と、 <br> 要素でのみ行います。
pre-wrap
連続する空白はそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。
pre-line
連続する空白は詰められて 1 つになります。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。

次の表に、white-space 値の動作をまとめます:

  改行 空白とタブ文字 テキストの折り返し
normal 詰める 詰める 折り返す
nowrap 詰める 詰める 折り返さない
pre 残す 残す 折り返さない
pre-wrap 残す 残す 折り返す
pre-line 残す 詰める 折り返す

形式文法

normal | pre | nowrap | pre-wrap | pre-line

基本的な例

code { 
  white-space: pre; 
}

要素内での折り返し

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
  white-space: pre-wrap;      /* 現行ブラウザ */
}

仕様書

仕様書 策定状況 コメント
CSS Text Level 3
The definition of 'white-space' in that specification.
草案 折り返しアルゴリズムの詳細を記述。
CSS Level 2 (Revision 1)
The definition of 'white-space' in that specification.
勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート(normalnowrap 1.0 1.0 (1.7 or earlier) 5.5[1] 4.0 1.0 (85)
pre 1.0 1.0 6.0 4.0 1.0 (85)
pre-wrap 1.0 1.0 (1.7 or earlier)-moz
3.0 (1.9)
8.0 8.0 3.0 (522)
pre-line 1.0 3.5 (1.9.1) 8.0 9.5 3.0 (522)
<textarea> でのサポート 1.0 36 (36) 5.5 4.0 1.0 (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

[1] Internet Explorer 5.5+ では word-wrap: break-word; をサポートしています。

関連情報

ドキュメントのタグと貢献者

Contributors to this page: mitsuba-clover, ethertank, sosleepy
最終更新者: mitsuba-clover,