white-space CSS2.2CSS3

white-space は、空白や改行の扱いを指定する時に使います。

名前:white-space
: normal | pre | nowrap | pre-wrap | pre-line
初期値:normal
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual(視覚的)
計算値:As specified(指定通り)
正規順序:n/a
アニメーション:discrete(離散的)

Value(値)

normal
初期値 半角スペース・タブ・改行を半角スペースとして表示して自動改行する。
pre
半角スペース・タブ・改行をそのまま表示。
nowrap
半角スペース・タブ・改行を半角スペースとして表示して自動改行しない。
pre-wrap
半角スペース・タブ・改行をそのまま表示。ボックスの端で自動改行する。
pre-line
半角スペース・タブ・改行を半角スペースとして表示して、文書内で改行された位置でも改行する。

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { white-space: normal; }
   p.test2 { white-space: pre; }
   p.test3 { white-space:nowrap; }
   p.test4 { white-space:pre-wrap; }
   p.test5 { white-space:pre-line; }
  </style>
 </head>
 <body>
   <p class="test1">normal normal          normal
   normal</p>
   <p class="test2">pre pre                pre
   pre</p>
   <p class="test3">nowrap nowrap          nowrap
   nowrap</p>
   <p class="test4">pre-wrap pre-wrap                pre-wrap
   pre-wrap</p>
   <p class="test5">pre-line pre-line                pre-line
   pre-line</p>
 </body>
</html>

display

normal normal normal normal

pre pre pre pre

nowrap nowrap nowrap nowrap

pre-wrap pre-wrap pre-wrap pre-wrap

pre-line pre-line pre-line pre-line

上に戻る

white-space CSS4

white-space プロパティは 「text-space-collapse」「text-wrap」「text-space-trim」の省略形です。(css4からは3つに分解されて、white-space プロパティは省略形として扱われるようです。)

名前:white-space
: normal | pre | nowrap | pre-wrap | pre-wrap-auto | pre-line
初期値:auto
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual(視覚的)
計算値:As specified(指定通り)
アニメーション:できない

次の表は省略形の値を省略されていないプロパティの値にマッピングしたものです。

white-spacetext-space-collapsetext-wraptext-space-trim
normalcollapsenormalnone
prepreservenowrapnone
nowrapcollapsenowrapnone
pre-wrappreservenormalnone
pre-wrap-autopreserve-autonormalnone
pre-linepreserve-breaksnormalnone

上に戻る