We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

初期値normal
適用対象全要素
継承継承する
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* 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 Module Level 3
white-space の定義
草案 折り返しアルゴリズムの詳細を記述。
CSS Level 2 (Revision 1)
white-space の定義
勧告 初回定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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; をサポートしています。

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

このページの貢献者: mitsuba-clover, Sebastianz, ethertank, sosleepy
最終更新者: mitsuba-clover,