Open4

CSS改行系プロパティまとめ

kzk4043kzk4043
  • word-break:改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうか
    • normal:既定の改行規則を使用します。
    • break-all:CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
    • keep-all:CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。
  • word-wrap→overflow-wrapになった
    • このプロパティはもともと、標準外かつ接頭辞のない word-wrap と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 overflow-wrap に改名されたため、 word-wrap は別名になりました。
  • overflow-wrap:インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうか
    • normal
    • anywhere:あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。
    • break-word:anywhere の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。
  • line-break:中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則 (禁則処理) を設定
    • auto:既定の改行規則を使用してテキストを改行します。
    • loose:最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。
    • normal:最も一般的な改行規則を使用してテキストを改行します。
    • strict:最も厳格な改行規則を使用してテキストを改行します。
    • anywhere:句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 word-break プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。
  • white-space:要素内のホワイトスペースをどのように扱うか
  • text-wrap:以下の CSS プロパティの一括指定です。
    • text-wrap-mode
    • text-wrap-style