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>` 要素内での折り返し

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)
基本サポート（`normal` と `nowrap`）	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; をサポートしています。

white-space

概要

構文

値

形式文法

例

基本的な例

<pre> 要素内での折り返し

仕様書

ブラウザ実装状況

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

`<pre>` 要素内での折り返し