hyphens

概要

hyphens プロパティは、行が折り返される際にテキストをより良く配置するため、ブラウザが単語をどのように分割するかを設定します。

• 初期値 manual
• 適用対象 全要素
• 継承 継承する
• 相対値の基準 無し
• メディア visual
• 計算値 指定値

構文

hyphens:  none | manual | auto

値

none

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

manual

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

auto

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

改行候補位置を示す

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

U+2010 (HYPHEN)

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

U+00AD (SHY)

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

例

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

p.none {
  -webkit-hyphens: none;
     -moz-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
     -moz-hyphens: manual;
      -ms-hyphens: manual;
          hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

これらの設定がどのように働くか、live example で確認してください。その動きを見るために、live example を表示した状態でウィンドウをリサイズしてください。

実際の表示を確認

仕様

ブラウザ実装状況

サポート言語一覧

ブラウザは以下の言語のハイフネーション辞書を提供します。

関連情報

• content