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. - どこでも折り返す・単語間で折り返す場合のハイフネーション無し (句読点などの役物が先頭に来ることもある)
- 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
書いてても分かりづらいのでサンプルを作った
See the Pen line-break with Japanese text by KIKIKI (@kikiki_kiki) on CodePen.
カギ括弧や句読点、ぁ のような子音の扱いが微妙に変わる。
デフォルトの auto
や loose
でもそんなに悪くないように感じる。strict
が紙面のような最も強い禁則ではあるが、テキストの入るボックスサイズによっては改行が多くなってしまう可能性もあるので、コンテンツの入るエリアのサイズを考慮して決めるのが良さそう
おわり ₍ᐢ•ᴗ•ᐢ₎
[参考]