hyphens
は CSS のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。
この対話型サンプルのソースファイルは 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
- ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置(改行候補位置の提案を参照)があれば、自動的な改行位置の選択を上書きします。
メモ: auto
を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の lang
属性を必ず指定してください。
形式文法
改行候補位置の提案
文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。
- U+2010 (HYPHEN)
- 「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。
- U+00AD (SHY)
- 不可視の「ソフト」ハイフン ("soft" hyphen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、
­
を使用してソフトハイフンを挿入することができます。
HTML の <wbr>
要素によって改行が行われた場合、ハイフンは挿入されません。
例
以下の例では3つのクラスを使用し、それぞれの hyphens
プロパティの設定を示します。
HTML
<dl>
<dt><code>none</code>: no hyphen; overflow if needed</dt>
<dd lang="en" class="none">An extreme­ly long English word</dd>
<dt><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)</dt>
<dd lang="en" class="manual">An extreme­ly long English word</dd>
<dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
<dd lang="en" class="auto">An extreme­ly long English word</dd>
</dl>
CSS
dd {
width: 55px;
border: 1px solid black;
}
dd.none {
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
dd.manual {
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
dd.auto {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
結果
仕様書
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Text Module Level 3 hyphens の定義 |
草案 | 初回定義。 |
初期値 | manual |
---|---|
適用対象 | すべての要素 |
継承 | あり |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
content
overflow-wrap
(旧word-wrap
)word-break