CSS white-space

white-spaceはHTMLの空白と改行の扱いを指定するCSSプロパティです。連続する複数の空白をひとつにまとめたり、長い行を自動的に折り返して改行することを禁止することができます。

書式

white-space: space

属性値

space
空白、タブ及び改行の扱いを次の値から指定する。
値 改行 空白とタブ 自動改行
normal しない 詰める する
pre そのまま そのまま しない
nowrap しない 詰める しない
pre-wrap そのまま そのまま する
break-spaces そのまま そのまま する
pre-line そのまま 詰める する 
<p style="width: 300px; white-space: normal">
  The  quick brown fox  jumps  over  the  lazy  dog.
</p>

The quick brown fox jumps over the lazy dog. 

<p style="width: 300px; white-space: pre">
  The  quick  brown fox jumps  over  the  lazy  dog.
</p>

The quick brown fox jumps over the lazy dog. 

<p style="width: 300px; white-space: nowrap">
  The  quick  brown fox jumps  over  the  lazy  dog.
</p>

The quick brown fox jumps over the lazy dog. 

<p style="width: 300px; white-space: pre-wrap">
  The  quick  brown fox jumps  over  the  lazy  dog.
</p>

The quick brown fox jumps over the lazy dog.

適用可能要素

すべての要素

使用例

次にスタイルシート属性 white-space の使用例と表示サンプルを示す。表示結果はブラウザによって異なることがある。

<p style="white-space:pre">white    space</p>

white space

<p style="white-space:nowrap">white    space</p>

white space

<p style="white-space: pre-wrap">white   space   white   space   white   space   white   space   white   space   white   space</p>

white space white space white space white space white space white space

関連記事

参考文献

World Wide Web Consortium (2023) CSS Text Module Level 3