このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

white-space”プロパティ:ホワイトスペースの処理と行の折り返し

記事Nov. 29th,2020
ホワイトスペースをどのように扱うかと行の折り返しを指定する
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 white-space: normal;
適用対象 インライン・ボックス
継承 Yes
パーセント値 パーセント値は指定できません
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 離散

white-space”プロパティはホワイトスペースをどのように扱うかと行の折り返しの可否を指定する以下のプロパティの一括指定プロパティです。

HTMLなどのソースコードに含まれるタブ文字や改行などのホワイトスペースはその多くがコードの見栄えを整えて編集しやすくするためのものであるため、既定では実際にユーザー・エージェントが文書を描画する際には取り除かれたり、まとめられたりする処理が行われます。“white-space”プロパティはこの処理の方法を変更することができます。

サンプルコード

p { white-space: pre-wrap;}

説明
normal ホワイトスペースはまとめられ、必要な場合は改行規則に従って行を折り返します
pre ホワイトスペースはそのまま残され、セグメント・ブレイク強制ライン・ブレイクとして残されます (行は折り返されず、強制ライン・ブレイクがない場合は要素に収まらない行ははみ出します。)
nowrap ホワイトスペースはまとめられますが、行の折り返しは行われません (強制ライン・ブレイクがない場合は要素に収まらない行ははみ出します。)
pre-wrap ホワイトスペースはそのまま残され、必要な場合は改行規則に従って行を折り返します
break-spacesCSS Text Module Level 3 で追加 pre-wrap”と同じですが、ホワイトスペースその他のスペース・セパレータは行末にある場合も含めて空間を占有し、これらすべての直後が改行位置の候補になります
pre-line 連続するホワイトスペースはまとめられますが、セグメント・ブレイク強制ライン・ブレイクとして残され、必要な場合は改行規則に従って行を折り返します
共通キーワード

値ごとのホワイトスペースの処理方法と折り返しの可否は以下の通りです。

改行文字 半角スペースとタブ 折り返し 行末の半角スペース 行末のその他のスペース・セパレータ
normal まとめる まとめる 除去する ぶら下げる
pre まとめる 残す 不可 残す
(折り返さない)
残す
(折り返さない)
nowrap まとめる まとめる 不可 除去する ぶら下げる
pre-wrap 残す 残す ぶら下げる ぶら下げる
break-spaces 残す 残す 残す
(必要であれば折り返す)
残す
(必要であれば折り返す)
pre-line 残す まとめる 除去する 残す
(必要であれば折り返す)

また、“white-space”プロパティの値は個別指定プロパティを以下のように指定した場合と一致します。

white-space text-space-collapse text-wrap text-space-trim
normal collapse wrap none
pre preserve nowrap none
nowrap collapse nowrap none
pre-wrap preserve wrap none
pre-line preserve-breaks wrap none

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
white-space
定義なし

定義あり

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
normal
定義なし

定義あり

定義あり

定義あり
pre
定義なし

定義あり

定義あり

定義あり
nowrap
定義なし

定義あり

定義あり

定義あり
pre-line
定義なし

定義あり

定義あり

定義あり
break-spaces
定義なし

定義なし

定義あり

定義なし

ホワイトスペースをまとめる

<p>
なまめかしきもの。
    簀子の高欄のわたりに、
        いとをかしげなる猫の、
            赤き首綱に白き札つきて、
                    いかりの緒くひつきて、
                        引きありくも、
                            なまめいたる。
</p>
p { white-space: normal;}

なまめかしきもの。 簀子の高欄のわたりに、 いとをかしげなる猫の、 赤き首綱に白き札つきて、 いかりの緒くひつきて、 引きありくも、 なまめいたる。

p { white-space: pre;}

なまめかしきもの。 簀子の高欄のわたりに、 いとをかしげなる猫の、 赤き首綱に白き札つきて、 いかりの緒くひつきて、 引きありくも、 なまめいたる。

p { white-space: nowrap;}

なまめかしきもの。 簀子の高欄のわたりに、 いとをかしげなる猫の、 赤き首綱に白き札つきて、 いかりの緒くひつきて、 引きありくも、 なまめいたる。

p { white-space: pre-line;}

なまめかしきもの。 簀子の高欄のわたりに、 いとをかしげなる猫の、 赤き首綱に白き札つきて、 いかりの緒くひつきて、 引きありくも、 なまめいたる。

ホワイトスペースを残す

<p>
なまめかしきもの。
    簀子の高欄のわたりに、
        いとをかしげなる猫の、
            赤き首綱に白き札つきて、
                    いかりの緒くひつきて、
                        引きありくも、
                            なまめいたる。
</p>
p { white-space: pre-wrap;}

なまめかしきもの。 簀子の高欄のわたりに、 いとをかしげなる猫の、 赤き首綱に白き札つきて、 いかりの緒くひつきて、 引きありくも、 なまめいたる。

p { white-space: break-spaces;}

なまめかしきもの。 簀子の高欄のわたりに、 いとをかしげなる猫の、 赤き首綱に白き札つきて、 いかりの緒くひつきて、 引きありくも、 なまめいたる。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク