CSSのhyphensで英単語にハイフンを入れて折り返す方法

​2026年11月14日​CSS​HTML,Playwright

英文の要素に hyphens: auto を付け、HTML の lang 属性で英語だと伝えると、ブラウザーがハイフネーションの辞書をもとに単語を分け、行末にハイフンを入れて折り返します。幅の狭い枠に長い英単語があっても、はみ出したり、右側に大きな空きができたりしにくくなります。日本語のページ（<html lang="ja">）では、英文の部分に lang="en" を付けないと、hyphens: auto だけでは単語が分けられませんでした。

hyphens: auto と lang 属性を指定する

hyphens は、単語の途中で折り返してよいかを決めるプロパティです。値は none、manual、auto の3つで、初期値は manual です。CSS の仕様で、子要素に継承されると決められています。

<html lang="en">
  ...
  <p class="body">Good documentation explains the internationalization settings and the accessibility requirements of every component.</p>
</html>

.body {
  hyphens: auto;
}

検証環境で、この段落を幅 150px にして比べました。何も指定しないと、「internationalization」が1行に収まらず、中身の幅（scrollWidth）が 155px になってはみ出しました。

Good
documentation
explains the
internationalization
settings and the
accessibility
requirements of
every component.

hyphens: auto を付けると、次のように「documenta-tion」と「internationaliza-tion」が分けられ、8行が7行になりました。中身の幅も 150px に収まりました。

Good documenta-
tion explains the
internationaliza-
tion settings and
the accessibility
requirements of
every component.

hyphens: auto で分けるときは、言語に合ったハイフネーションの辞書が使われます。MDN の hyphens のページでは、ブラウザーは lang 属性があり、その言語の辞書を使えるときにだけハイフネーションを行うと説明されています。検証環境でも、<html> から lang 属性を外すと、hyphens: auto のままでも単語は分けられず、指定なしと同じ折り返しになりました。

ドイツ語の文に lang="de" を付けた場合は、「Donaudampf-schifffahrtsgesell-schaft」のように分けられました。同じ文に lang="en" を付けると、この単語は分けられず、中身の幅が 289px になって枠から大きくはみ出しました。

日本語のページでは、英文の部分に lang="en" を付ける

日本語のブログでは、<html lang="ja"> のページの中に英文を書くことになります。検証環境で、<html lang="ja"> のページに同じ英文の段落を置き、hyphens: auto を付けると、単語は分けられませんでした。段落に lang="en" を足すと、英語のページのときと同じ7行になりました。

<p class="body" lang="en">Good documentation explains ...</p>

日本語の文の中の英単語も、lang 属性を付けた span で囲むと分けられました。

<p class="body">この設定は <span lang="en">internationalization</span> と <span lang="en">accessibility</span> の両方に関わります。</p>

この設定は interna-
tionalization と ac-
cessibility の両方に
関わります。

span に lang を付けないと、「internationalization」は1語のまま次の行へ送られ、枠から 5px はみ出しました。

両端揃えに hyphens: auto を足すと、単語のあいだの空きが小さくなる

text-align: justify で両端をそろえると、最後の行を除き、行の左右の端が枠の端にそろうように単語のあいだが空けられます。幅の狭い枠では、この空白が大きく開くことがあります。

検証環境で、最後の行を除いて、空白1つずつの幅を測りました。ふだんの空白の幅は 5.1px です。text-align: justify だけでは、いちばん広い空白が 57.4px になりました。hyphens: auto を足すと、いちばん広い空白は 27.5px でした。

先頭が大文字の英単語は分けられなかった

検証環境で、lang="en" の段落の先頭に「Internationalization」を置くと、hyphens: auto を付けても分けられず、枠からはみ出しました。先頭を小文字の「internationalization」にすると、「internationaliza-tion」に分けられました。すべて大文字の「INTERNATIONALIZATION」も分けられませんでした。

Chromium のソースコードを見ると、ハイフネーションの設定で、言語が en で始まるときだけ、大文字で始まる単語を分けないようにしています。単語を分けるかどうかを決める処理で、単語の1文字目が大文字かどうかを調べています。検証環境でも、lang="fr" の「Internationalisation」と、lang="de" の「Donaudampfschifffahrt」は、先頭が大文字でも分けられました。同じソースコードのコメントには、大文字で始まる単語の扱いはまだ議論中だと書かれています。

ソースコードを見ると、文の中の位置にかかわらず、単語の1文字目だけで判断する作りです。lang="en" の文で大文字で始まる長い単語が枠に収まらないときは、hyphens: auto だけでははみ出しが残ります。

ソフトハイフンで、分けてよい位置を自分で決める

初期値の manual では、ソフトハイフン（U+00AD、HTML では ­）やハイフン（U+2010）のように、分けてよい位置を示す文字のところでだけ単語が分けられます。ソフトハイフンはふだんは表示されず、その位置で折り返したときだけハイフンが表示されます。

<p>Good docu&shy;mentation explains the inter&shy;nationalization settings ...</p>

検証環境で、この段落に何も指定しないと、次のように ­ の位置で分けられ、枠に収まりました。lang 属性がないページでも同じでした。

Good docu-
mentation
explains the inter-
nationalization
settings and the
accessibility
requirements of
every component.

hyphens: none を付けると ­ も使われず、­ を入れないときと同じく、中身の幅が 155px になって枠からはみ出しました。

文字列として扱うときの違いもあります。段落の中身を選択して getSelection().toString() で取り出すと、hyphens: auto で入ったハイフンは含まれませんでした。­ を入れた段落では、U+00AD が3つ含まれていました。

分ける単語の長さを hyphenate-limit-chars で決める

短めの単語まで分けられると読みにくいときは、hyphenate-limit-chars で、分ける単語の最小の文字数を決められます。値は「単語の最小の文字数」「ハイフンの前の最小の文字数」「ハイフンの後の最小の文字数」の順に書きます。MDN では、ブラウザーがよりよい値を決められないときの既定値は、順に 5、2、2 とされています。

.body {
  hyphens: auto;
  hyphenate-limit-chars: 15;
}

検証環境で 15 を指定すると、13文字の「documentation」は分けられなくなり、20文字の「internationalization」だけが「inter-nationalization」に分けられました。

Good
documentation
explains the inter-
nationalization
settings and the
accessibility
requirements of
every component.

ハイフンの文字を hyphenate-character で変える

行末に入る文字は、hyphenate-character で変えられます。初期値の auto では、ブラウザーが文字を選びます。

.body {
  hyphens: auto;
  hyphenate-character: "=";
}

検証環境では、"=" にすると、行末の文字が「=」になりました。1行目は「documenta-」ではなく「documen=」で分けられ、分ける位置も変わりました。

URL には hyphens: manual と overflow-wrap: anywhere を指定する

本文の要素に hyphens: auto を付けると、その中のリンクの URL にも引き継がれます。検証環境で、URL を含む英文に hyphens: auto を付けると、URL の中の「english」が「eng-lish」に分けられ、「eng-」の行末にハイフンが表示されました。この表示では、ハイフンが URL の一部なのかどうか区別できません。

.body {
  hyphens: auto;
}

.body a {
  hyphens: manual;
  overflow-wrap: anywhere;
}

a 要素に hyphens: manual を指定すると、URL の中の単語は分けられなくなりました。ただし、hyphens: auto のときと同じく、中身の幅は 274px のままで、枠からはみ出しました。hyphens: auto で URL の中の単語が分けられても、「https://example.com/articles/how-」のように区切れる位置のない部分が長いと、はみ出したままになります。URL を枠に収めるには、overflow-wrap: anywhere を足します。この指定で、URL は行の端で折り返され、150px に収まりました。この折り返しではハイフンは入りません。overflow-wrap: anywhere の値の意味は、MDN の overflow-wrap のページに説明があります。

対応しているブラウザー

互換性データでは、接頭辞を付けない書き方に、各ブラウザーが次のバージョンから対応しています。

互換性データでは、パソコン版の Chrome と Edge の 87 までは、hyphens: auto は macOS でだけ使えたとされています。Safari は 16 以前でも、接頭辞を付けた -webkit-hyphens に対応しています。互換性データには、hyphens で単語を分けられる言語が63の項目に分けて載っています。たとえば英語は Chrome 55、フランス語は Chrome 87 から対応しています。