CSS Reference

hyphens

ハイフネーションの方法を指定する

hyphens プロパティは、単語のハイフネーションを行う方法を指定します。

ハイフネーション（hyphenation）とは、英単語など、通常はその途中で改行などによって分割することが許されていない単語を、段落の都合などで分割しなければならない場合にそれを行うための仕組みです。

通常はハイフン（- / U+2010）を改行位置に挿入することで、それがひと続きの単語であることを示します。

日本語のように単語の途中でも改行することができる言語においては利用機会はないですが、英語をはじめ、欧文でテキストを記述する場合には利用する可能性が高いプロパティです。

なお、ハイフネーションはあくまで表示上の効果のみで、ハイフネーションが文書の内容（例えば読み上げや、テキストの選択、あるいは検索など）には影響しないようになっています。

hyphens プロパティに指定できる値は下記の通りです。

none 単語はハイフネーションされません。つまり、単語の途中では改行されず、常に空白文字の位置で改行されることになります。
manual ハイフネーションの機会を明示的に示唆する文字が単語内にある場合のみ、単語はハイフネーションされます。ユーザーエージェントは、言語ごとに固有の、適切なハイフネーション文字を使用し、ハイフネーションを行うことが求められます。（既定値）
auto ハイフネーションの機会を明示的に示唆する文字が単語内にある場合、もしくは、ユーザーエージェントによって決定された、その言語に適したハイフネーション機会がある場合に、単語はハイフネーションされます。
ハイフネーションの機会を明示的に示唆する文字が単語内にある場合はその位置が優先されます。ハイフネーションの機会を明示的に示唆する文字が単語内がない場合、あるいはそれだけではハイフネーション機会が足りない場合は、ユーザーエージェントが決めたハイフネーション機会でもハイフネーションが行われます。

ハイフネーションの機会を明示的に示唆する文字とは

ハイフネーションを単語内のどの位置で行うかは、言語ごとにユーザーエージェント（ブラウザ）が決定しますが、制作者側で明示的にハイフネーション機会を指定することもできます。

Unicode においてハイフネーション機会の明示に利用できる文字は、U+00AD（ソフトハイフン）、もしくは U+2010（ハードハイフン）の2文字です。

ハードハイフンはハイフン（-）をそのまま記述することになるため、ハイフネーションが行われない場合でもハイフンは表示されてしまいますから、通常、ハイフネーション機会の明示が必要な場合はソフトハイフンを使用します。HTML においては、文字参照 ­ を単語内の任意の箇所に記述することで、ハイフネーション機会を明示することができます。

例えば ex­ample のように記述すると、「example」という英単語の、「ex」と「ample」の間にハイフネーション機会が明示されます。

hyphensの仕様

初期値
  • manual
対象となる要素
  • テキスト
継承
  • あり

hyphensのサンプルソース

hyphens: none;
hyphens: manual;
hyphens: auto;

主要ブラウザの対応

IE11 ○-ms-
Edge（EdgeHTML） ○-ms-
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome