line-break CSS3

line-break は、要素内で適用される改行規則の厳格さを指定します。特に 折り返しがどのように約物（括弧、句読点、疑問符など）や記号と相互作用するかを指定します。 詳細 例えば、閉じ括弧「)」「]」句読点「。」「、」長音符「ー」 小さい文字「ぁ」「っ」「ゃ」などが行頭に配置されないようにします。

名前:line-break
値: auto | loose | normal | strict | anywhere
初期値:auto
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:as specified（指定通り）
正規順序:n/a
アニメーション:discrete（離散的）

Value（値）

auto
初期値 UA に依存。 （行の長さに応じて制限を変更。短い行に対してより制限の少ない規則を使用など。） CSS3
loose
最も制限の少ない規則を使用してテキストを分割する。（新聞などの短い行に使用）CSS3
normal
一般的な規則を使用してテキストを分割する。CSS3
strict
最も厳格な規則を使用してテキストを分割する。CSS3
anywhere
すべての文字単位の周りのどこでも自動改行をすることができる。ハイフネーション（-）は適用されない。 [UAX14] CSS3

CSS では、テキストの折り返し規則の厳格さが 4 つのレベルで区別されます。loose、normal、strict それぞれに有効で 正確な一連の規則は UA に依存し、言語の慣例に従うべきです。正し、この仕様では次のことが必要です。

  • 次の改行では、strict では禁止され、nomarl と loose では許可されます。
    • 日本語の小文字、カタカナ・ひらがなの長音記号の前、つまり Unicode Line Break property CJ を持つ文字の前の改行 （[UNICODE]LineBreak.txt を参照）
  • 次の改行では、コンテンツ言語が中国語または日本語の場合は、normal、loose で許可されます。それ以外は禁止されます。
    • ハイフン類の前の改行 ： ‐（U+2010）、–（U+2013）、〜（U+301C）、゠（U+30A0）
  • 次の改行では、normal と strict では禁止され、loose では許可されます。
    • 反復記号の前の改行 : 々（U+3005）、〻（U+303B）、ゝ（U+309D）、ゞ（U+309E）、ヽ（U+30FD）、ヾ（U+30FE）
    • ‥（U+2025）、…（U+2026） などの分離不可能な文字間の区切り、 つまり、Unicode Line Break property IN を持つ文字 （[UNICODE]LineBreak.txt を参照）
  • 次の改行では、コンテンツの言語が中国語または日本語の場合は、loose で許可されます。それ以外は禁止されます。
    • 特定の句読点の前の改行 ： ・（U+30FB）、：（U+FF1A）、；（U+FF1B）、･（U+FF65）、‼（U+203C）、⁇（U+2047）、 ⁈（U+2048）、⁉（U+2049）、！（U+FF01）、？（U+FF1F）
    • 接尾辞の前で改行 ： Unicode Line Break property PO を持つ文字と the East Asian Width property [UAX11] が A、F、W の文字
    • 接頭辞の後で改行 ： Unicode Line Break property PR を持つ文字と the East Asian Width property [UAX11] が A、F、W の文字

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { line-break: auto; }
   p.test2 { line-break: loose; }
   p.test3 { line-break: normal; }
   p.test4 { line-break: strict; }
   p.test5 { line-break: anywhere; }
  </style>
 </head>
 <body>
   <p class="test1">（文章）</p>
   <p class="test2">（文章）</p>
   <p class="test3">（文章）</p>
   <p class="test4">（文章）</p>
   <p class="test5">（文章）</p>
 </body>
</html>

display

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お）：；･ ??

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お）：；･ ??

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お）：；･ ??

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お）：；･ ??

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お）：；･ ??

上に戻る