Nov. 29th,2020
プロパティについて
概要
| 初期値 | “white-space: normal;” |
| 適用対象 | インライン・ボックス |
| 継承 | Yes |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 一括指定が対象とする各プロパティの定義に依る |
| アニメーション | 離散 |
“white-space”プロパティはホワイトスペースをどのように扱うかと行の折り返しの可否を指定する以下のプロパティの一括指定プロパティです。
HTMLなどのソースコードに含まれるタブ文字や改行などのホワイトスペースはその多くがコードの見栄えを整えて編集しやすくするためのものであるため、既定では実際にユーザー・エージェントが文書を描画する際には取り除かれたり、まとめられたりする処理が行われます。“white-space”プロパティはこの処理の方法を変更することができます。
サンプルコード
p { white-space: pre-wrap;}
値
| 値 | 説明 |
|---|---|
| normal | ホワイトスペースはまとめられ、必要な場合は改行規則に従って行を折り返します |
| pre | ホワイトスペースはそのまま残され、セグメント・ブレイクは強制ライン・ブレイクとして残されます (行は折り返されず、強制ライン・ブレイクがない場合は要素に収まらない行ははみ出します。) |
| nowrap | ホワイトスペースはまとめられますが、行の折り返しは行われません (強制ライン・ブレイクがない場合は要素に収まらない行ははみ出します。) |
| pre-wrap | ホワイトスペースはそのまま残され、必要な場合は改行規則に従って行を折り返します |
break-spaces |
“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” |
ホワイトスペースをまとめる
<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;}
なまめかしきもの。 簀子の高欄のわたりに、 いとをかしげなる猫の、 赤き首綱に白き札つきて、 いかりの緒くひつきて、 引きありくも、 なまめいたる。
