段落・折り返し
hyphens
hyphens は、行に収まらない単語を途中で区切り、ハイフン（-）を付けて次の行に送るかを決めます。英語のように単語を空白で分ける言語で、行の右端のでこぼこを減らせます。
構文
none | manual | autoプレビュー
Internationalization needs extraordinary typographic care.
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
font-size: 28px;
hyphens: auto;
}コントロール
hyphensauto
Internationalization needs extraordinary typographic care.
解説
値の書き方
none：単語の途中では区切りません。ソフトハイフンを入れた位置でも区切りません。manual：ソフトハイフン（­、U+00AD）や「-」を入れた位置でだけ区切ります。初期値です。auto：ブラウザが言語ごとの辞書を使って、区切ってよい位置を決めます。
auto には言語の指定が要る
auto は、要素か祖先の lang 属性で言語がわかるときだけ効きます。辞書を持っている言語もブラウザによって違い、日本語のように単語を区切らない言語には効きません。
このページのプレビューは文字を 28px にして、長い単語が 1 行に収まらないようにしています。「extraordinary」と「typographic」にはソフトハイフンが入っているので manual でも区切れますが、入っていない「Internationalization」を区切れるのは auto だけです。
Safari は長く -webkit-hyphens と接頭辞を付けて書く必要があったので、古い Safari にも効かせたいときは両方書きます。