text-wrap と hyphens: auto を組み合わせる
text-wrap（特に pretty）が hyphens: auto とどう相互作用して、長文に最適な折り返しを実現するか。
詳細な説明
hyphens: auto のおさらい
hyphens: auto は、ブラウザに対して言語的に適切な位置でソフトハイフンを挿入することを許可します。指定がないとブラウザはスペースと明示的な ­ 文字でしか折り返しません。指定があると "internationalization" のような単語が "inter-nation-al-iza-tion" のように利用可能な幅に応じて分割されます。
hyphens: auto を機能させるには、ドキュメントまたはブロックに lang 属性を指定する必要があります：
<html lang="en">
hyphens + pretty が魔法の組み合わせである理由
text-wrap: pretty は複数の改行候補セットを評価し、オーファン・ウィドウ・悪いハイフネーションを最小化するものを選びます。hyphens: auto を有効にすると、pretty が 検討できる候補が増える ので、最終行のチューニングがより積極的に行えます。ハイフネーションがないと、pretty の選択肢はスペース区切りの位置に限られます。
本文に推奨されるスタック
article {
text-wrap: pretty;
hyphens: auto;
line-height: 1.6;
max-width: 70ch;
/* 任意: ハイフン位置を制御 */
hyphenate-limit-chars: 6 3 3;
}
hyphenate-limit-chars: 6 3 3 は「6文字以上の単語のみハイフネーションし、ハイフン前に3文字、ハイフン後に3文字を残す」という意味です。"a-bout" や "th-ought" のような不格好な分割を防ぎます。
見出しに hyphens を使ってはいけない
見出し（text-wrap: balance を使う）には hyphens を off にしてください：hyphens: manual。ハイフンで分割された見出しは見栄えが悪く、balance が目指す「ほぼ均等な行」とも噛み合いません。
ブラウザサポート
hyphens: auto は Firefox を含むすべての常時更新ブラウザで動作します。pretty 自体はフォールバックしても、Firefox ユーザーもハイフネーションの恩恵は受けられます。
ユースケース
長文記事、ドキュメント、新聞風の狭いカラム、幅制約のあるモバイル読書ビュー、ブラウザ内の電子書籍リーダー、justify したテキストで「川（white space rivers）」を避けたい場合。