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] が AFW の文字
    • 接頭辞の後で改行 : Unicode Line Break property PR を持つ文字と the East Asian Width property [UAX11] が AFW の文字

上に戻る

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

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お):;・ ??

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お):;・ ??

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お):;・ ??

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お):;・ ??

あーっいーぁぃぅぇぉ。え々…ゞ。々…ゞ。お):;・ ??

上に戻る