CSS辞典 white-spaceプロパティの解説

スペース、タブ、改行の表示方法を指定する「white-spaceプロパティ」の使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値normal
適用される要素すべての要素
モジュールCSS Fonts Module Level3
継承あり

概要・使用方法

{white-space: 表示形式;}

white-spaceプロパティはスペース、タブ、改行の表示方法を指定します。連続したテキストの空白、タブを1つにまとめるか。また、行を自動的に折り返しするかどうかについて指定します。

内容要素の端
normal(初期値)表示方法を指定しません。
「text-space-collapse: collapse; text-wrap: normal」の指定と同じ
自動改行される
preスペース、タブ、改行はそのままで表示されます。
「text-space-collapse: preserve; text-wrap:none」の指定と同じ
自動改行されない
nowrapスペース、タブ、改行は半角スペースとして表示されます。
「text-space-collapse: collapse; text-wrap: none」の指定と同じ
自動改行されない
pre-wrapスペース、タブ、改行はそのまま表示されます。
「text-space-collapse: preserve; text-wrap: normal」
自動改行されない
pre-line改行はそのまま表示され、スペースとタブは半角スペースとして表示されます。
「text-space-collapse: preserve-breaks; text-wrap: normal」の指定と同じ
自動改行される
break-spaces基本的な動作はpre-wrapと同様。ただし、文末に連続するスペースがある場合はそのまま表示され、要素の幅で自動的に改行されます。自動改行される

CSS3変更点
white-spaceプロパティは、text-space-collapse及びtext-wrapという2つのプロパティの値をまとめて一括で指定するためのプロパティとして再規定されています。
text-space-collapseプロパティは、要素内部で半角スペースや改行をどのように扱うかを細かく定義するためのもので、CSS3で新しく追加予定のプロパティです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>white-spaceプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample0{
                    white-space: normal;
                    width: 200px;
                    height: 100px;
                    border: 1px solid #ffaa00;
                  }
          .sample1{
                    white-space: nowrap;
                    width: 200px;
                    height: 100px;
                    border: 1px solid #ffaa00;
                  }
          .sample2{
                    white-space: pre;
                    width: 200px;
                    height: 100px;
                    border: 1px solid #ffaa00;
                  }
          .sample3{
                    white-space: pre-wrap;
                    width: 200px;
                    height: 100px;
                    border: 1px solid #ffaa00;
                  }
          .sample4{
                    white-space: pre-line;
                    width: 200px;
                    height: 100px;
                    border: 1px solid #ffaa00;
                  }
          .sample5{
                    white-space: break-spaces;
                    width: 200px;
                    height: 100px;
                    border: 1px solid #ffaa00;
                  }
    </style>
  </head>
  <body>
      <h1>normal</h1>
      <p class="sample0">Is it a scrubbing brush        that can be used as a turtle scrub
      bing brush?
      </p>
      <h1>nowrap</h1>
      <p class="sample1">Is it a scrubbing brush        that can be used as a turtle scrub
      bing brush?
      </p>
      <h1>pre</h1>
      <p class="sample2">Is it a scrubbing brush        that can be used as a turtle scrub
      bing brush?
      </p>
      <h1>pre-wrap</h1>
      <p class="sample3">Is it a scrubbing brush        that can be used as a turtle scrub
      bing brush?
      </p>
      <h1>pre-line</h1>
      <p class="sample4">Is it a scrubbing brush        that can be used as a turtle scrub
      bing brush?
      </p>
      <h1>break-spaces</h1>
      <p class="sample5">Is it a scrubbing brush        that can be used as a turtle scrub
      bing brush?
      </p>
  </body>
</html>

normal

Is it a scrubbing brush that can be used as a turtle scrub bing brush?

nowrap

Is it a scrubbing brush that can be used as a turtle scrub bing brush?

pre

Is it a scrubbing brush that can be used as a turtle scrub bing brush?

pre-wrap

Is it a scrubbing brush that can be used as a turtle scrub bing brush?

pre-line

Is it a scrubbing brush that can be used as a turtle scrub bing brush?

break-spaces

Is it a scrubbing brush that can be used as a turtle scrub bing brush?

chromeブラウザ実行結果

chrome

Firefox ブラウザ実行結果

Firefox

edgeブラウザ実行結果

edge

operaブラウザ実行結果

opera