none単語の途中では分割しない
ソフトハイフンなどの候補位置があっても使わず、空白など単語の外側にある通常の位置だけで折り返します。
hyphens
英単語が行の幅へ収まらないとき、単語を分けてハイフンを付ける方法を指定するプロパティ。候補位置を含む英単語で、値ごとの折り返し方を比べます。
CSSのhyphensとは？
英単語を行末で分けるとき、ハイフンを付けない・候補位置だけで付ける・ブラウザーへ任せる違いをライブプレビューで比べながら、none・manual・autoを初学者向けに解説します。
遊んでみよう
候補位置あり／なしの英単語を比較
SOFT HYPHEN
An extraordinarily long English word.
AUTO DICTIONARY
CSS makes internationalization understandable.
CSS
.element hyphens: manual;
値のパターン
hyphensの構成要素
manual指定した候補位置だけで分割する
初期値です。­などで埋め込んだソフトハイフンの位置を、必要なときだけ分割候補として使います。
auto + lang言語に合う位置をブラウザーへ任せる
lang属性で示した言語と利用できる辞書をもとに、ブラウザーが単語を分割する位置を選びます。
早見表
初期値はmanualです。確実に候補位置を管理するならmanual、自動分割を使うなら対象テキストのlang属性も指定します。
01
none単語内の候補位置では分割しない分割なし02
manual手動で示した候補位置だけで分割する初期値03
auto言語の規則をもとに自動で分割するlangが重要04
­必要なときだけ見える分割候補を埋め込むソフトハイフン05
U+2010常に見えるハイフンを分割候補にするハードハイフン06
inherit親要素の指定値を受け継ぐグローバルよくある使い方
01
狭い英語の記事カードを整える
英語の見出しへautoを指定すると、長い単語を行末で分け、段落右端の大きな空きを減らせます。
.article-title { hyphens: auto; }02
商品名の分割位置を自分で決める
固有名詞へソフトハイフンを埋め込み、manualで意図した候補位置だけを使います。
<span lang="en">extra­ordinary</span>03
識別子を途中で分けない
製品コードなど、ハイフン付きで分割すると読み違えやすい短い文字列ではnoneを選びます。
.product-code { hyphens: none; }ポイント
autoには、正しいlang属性とハイフネーション辞書が必要。
hyphensの初期値はmanualで、すべての要素に適用でき、子要素へ継承されます。noneは単語内の候補位置を使わず、manualはソフトハイフンなどで示した位置だけを使い、autoは言語に合う位置をブラウザーが選びます。自動分割にはHTMLのlang属性と、その言語に対応するハイフネーション辞書が必要です。辞書や分割規則にはブラウザー差があるため、重要な固有名詞ではmanualも検討します。word-break: break-allが指定されるとハイフンは表示されません。値の切り替えは離散的に変化します。
関連するCSSも見てみよう。
hyphens と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。