hyphens

Baseline 2023 *
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

メモ: 上記のデモでは、 "An extra­ordinarily long English word!" に非表示の ­ (ソフトハイフン)の文字が含まれており、 An extra­­ordinarily long English word! のようになっています。この文字は hyphens: manual; が指定された場合にハイフンを挿入することができる位置を示しています。

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

メモ: どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。

対応していれば、 hyphenate-character を使用して、分割された行の終わりに使用する代替のハイフン文字を指定することができます。

構文

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

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

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

none

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

manual

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

auto

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

メモ: auto を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の lang 属性を必ず指定してください。

メモ: word-break: break-all を適用すると、と、単語がハイフネーションポイントで区切られていても、ハイフンはまったく表示されません。

改行候補位置の提案

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

U+2010 (HYPHEN)

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

U+00AD (SHY)

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

メモ: HTML の <wbr> 要素によって改行が行われた場合、ハイフンは挿入されません。

公式定義

初期値manual
適用対象すべての要素
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

hyphens = 
none |
manual |
auto

テキストのハイフネーションの指定

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

HTML

html
<dl>
  <dt><code>none</code>: ハイフンなし、必要に応じてあふれさせる</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: &amp;hyphen; または &amp;shy; のところだけ(必要に応じて)折り返す
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: アルゴリズムで決めた場所で(必要に応じて)折り返す</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

仕様書

Specification
CSS Text Module Level 3
# hyphens-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hyphens
auto value
Hyphenation dictionary for Afrikaans (af, af-*)
Hyphenation dictionary for Albanian (sq, sq-*)
Hyphenation dictionary for Ahmaric (am, am-*)
Hyphenation dictionary for Armenian (hy, hy-*)
Hyphenation dictionary for Assamese (as, as-*)
Hyphenation dictionary for Basque (be, be-*)
Hyphenation dictionary for Belarusian (be, be-*)
Hyphenation dictionary for Bengali (bn, bn-*)
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)
Hyphenation dictionary for Bulgarian (bg, bg-*)
Hyphenation dictionary for Catalan (ca, ca-*)
Hyphenation dictionary for Croatian (hr, hr-*)
Hyphenation dictionary for Mongolian (Cyrillic) (mn-cyrl, mn-cyrl-*)
Hyphenation dictionary for Czech (cs, cs-*)
Hyphenation dictionary for Danish (da, da-*)
Hyphenation dictionary for Dutch (nl, nl-*)
Hyphenation dictionary for English (en, en-*)
Hyphenation dictionary for Esperanto (eo, eo-*)
Hyphenation dictionary for Estonian (et, et-*)
Hyphenation dictionary for Ethiopic script (mul-ethi, mul-ethi-*)
Hyphenation dictionary for Ethiopic script (und-ethi, und-ethi-*)
Hyphenation dictionary for Finnish (fi, fi-*)
Hyphenation dictionary for French (fr, fr-*)
Hyphenation dictionary for Galician (gl, gl-*)
Hyphenation dictionary for Georgian (ka, ka-*)
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)
Hyphenation dictionary for Gujarati (gu, gu-*)
Hyphenation dictionary for Hindi (hi, hi-*)
Hyphenation dictionary for Hungarian (hu, hu-*)
Hyphenation dictionary for Icelandic (is, is-*)
Hyphenation dictionary for Interlingua (ia, ia-*)
Hyphenation dictionary for Irish (ga, ga-*)
Hyphenation dictionary for Italian (it, it-*)
Hyphenation dictionary for Kannada (kn, kn-*)
Hyphenation dictionary for Kurmanji (kmr, kmr-*)
Hyphenation dictionary for Latin (la, la-*)
Hyphenation dictionary for Latvian (lv, lv-*)
Hyphenation dictionary for Lithuanian (lt, lt-*)
Hyphenation dictionary for Malayalam (ml, ml-*)
Hyphenation dictionary for Marathi (mr, mr-*)
Hyphenation dictionary for Modern Greek (el, el-*)
Hyphenation dictionary for Mongolian (mn, mn-*)
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)
Hyphenation dictionary for Old Slavonic (cu, cu-*)
Hyphenation dictionary for Oriya (or, or-*)
Hyphenation dictionary for Polish (pl, pl-*)
Hyphenation dictionary for Portuguese (pt, pt-*)
Hyphenation dictionary for Punjabi/Panjabi (pa, pa-*)
Hyphenation dictionary for Russian (ru, ru-*)
Hyphenation dictionary for Slovak (sk, sk-*)
Hyphenation dictionary for Slovenian (sl, sl-*)
Hyphenation dictionary for Spanish (es, es-*)
Hyphenation dictionary for Swedish (sv, sv-*)
Hyphenation dictionary for Tamil (ta, ta-*)
Hyphenation dictionary for Telugu (te, te-*)
Hyphenation dictionary for Turkish (tr, tr-*)
Hyphenation dictionary for Turkmen (tk, tk-*)
Hyphenation dictionary for Ukrainian (uk, uk-*)
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)
Hyphenation dictionary for Welsh (cy, cy-*)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報