hyphens

概要

hyphens CSS プロパティは、行を折り返す際の単語のハイフネーションを設定します。ハイフネーションをまったく行わない、ブラウザがいつハイフネーションを行うべきかを制御する、あるいはブラウザにハイフネーションを制御させることができます。

ハイフネーションの規則は言語に依存します。HTML では、言語を lang 属性で判断します。またブラウザは、この属性が設定されていて適切なハイフネーション辞書が使用できる場合に限り、ハイフネーションを行います。XML では xml:lang 属性を使用しなければなりません。

構文

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

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

値

none

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

manual

単語は行送りの際に、単語内にある改行位置を示す文字のみで分割します。詳しくは 改行候補位置を示す を参照してください。

auto

ブラウザは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。改行候補位置を示す で扱っている改行候補位置は、可能であれば自動的に改行位置として選択されます。

改行候補位置を示す

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

U+2010 (HYPHEN)

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

U+00AD (SHY)

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

形式構文

none | manual | auto

例

以下の CSS では 3 つのクラスを作成しており、それぞれが hyphens プロパティで指定可能な設定になります。

<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 algo is deciding (if needed)
    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
  </li>
</ul>

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;
}

仕様

ブラウザ実装状況

[1] 自動ハイフネーションは実施できず、-webkit-hyphens: none のみサポートしています。

[2] 自動ハイフネーションは、ハイフネーション辞書が Gecko に統合されている言語に限り動作します。

[3] 自動ハイフネーションは、ハイフネーション辞書が Internet Explorer に統合されている言語に限り動作します。

[4] en-US の辞書を使用します。

[5] en-GB と en-US で異なる辞書を使用します。

[6] ポルトガル語の辞書を使用します。

関連情報

• content