hyphens

CSS の hyphens プロパティは、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、文字列中に手動で指定された位置でハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

ハイフネーションの規則は言語に依存します。 HTML では言語は lang 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、 xml:lang 属性を使用する必要があります。

構文

/* キーワード値 */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* グローバル値 */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

hyphens プロパティは、以下に挙げたキーワード値のうちの一つで指定します。

値

none

単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。

manual

単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは改行候補位置の提案を参照してください。

auto

ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置（改行候補位置の提案を参照）があれば、自動的な改行位置の選択を上書きします。

形式文法

none | manual | auto

改行候補位置の提案

文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。

U+2010 (HYPHEN)

「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。

U+00AD (SHY)

不可視の「ソフト」ハイフンです。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、­ を使用してソフトハイフンを挿入することができます。

例

以下の例では3つのクラスを使用し、それぞれの hyphens プロパティの設定を示します。

HTML

<ul>
  <li><code>none</code>: no hyphen; overflow if needed
    <p lang="en" class="none">An extreme&shy;ly long English word</p>
  </li>  
  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
  </li>
  <li><code>auto</code>: hyphen where the algorithm is deciding (if needed)
    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
  </li>
</ul>

CSS

p { 
  width: 55px;
  border: 1px solid black;
 }
p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

結果

仕様書

ブラウザー実装状況

関連情報

• content