かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

CSS 日本語をいい感じにできる line-break プロパティ

WEB サイトのコンテンツの主体は文章です。
その文章を日本語でもエディトリアルの禁則のようにいい感じにしてくれるプロパティを知ったのでメモ

line-break プロパティ

The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.
cf. line-break - CSS: Cascading Style Sheets | MDN

line-break プロパティの値

  • auto (default)
    • Break text using the default line break rule.
  • loose
    • Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.
    • 弱い禁則 (一般的に新聞などの短い行に使われる)
  • normal
    • Break text using the most common line break rule.
    • 一般的な改行規則
  • strict
    • Break text using the most stringent line break rule.
    • 強い禁則
  • anywhere
    • There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.
    • どこでも折り返す・単語間で折り返す場合のハイフネーション無し (句読点などの役物が先頭に来ることもある)

書いてても分かりづらいのでサンプルを作った

See the Pen line-break with Japanese text by KIKIKI (@kikiki_kiki) on CodePen.

カギ括弧や句読点、ぁ のような子音の扱いが微妙に変わる。
デフォルトの autoloose でもそんなに悪くないように感じる。strict が紙面のような最も強い禁則ではあるが、テキストの入るボックスサイズによっては改行が多くなってしまう可能性もあるので、コンテンツの入るエリアのサイズを考慮して決めるのが良さそう

おわり ₍ᐢ•ᴗ•ᐢ₎


[参考]