CSS hyphens プロパティ｜英単語のハイフネーション自動化・lang属性との関係・ブラウザ対応

▶

この記事の要点

hyphens は英単語の自動ハイフネーション（行末で単語を分割しハイフン - を入れる）を制御する CSS プロパティ
値は none / manual / auto。既定は manual
auto を効かせるには html lang="en" のように言語属性が必須。日本語 (lang="ja") では基本的に効かない
（ソフトハイフン）や ‐（明示ハイフン）を manual 値と組み合わせると狙った位置でだけ分割できる
Safari は古くから -webkit-hyphens プレフィックスが必要だったが、現代ブラウザはほぼ標準対応

hyphens とは

hyphens は CSS のテキスト整形プロパティの 1 つで、長い英単語が行末に来た時にハイフン (-) を入れて自動的に折り返す「ハイフネーション」機能を制御します。新聞や書籍の英文組版でおなじみの処理を、ブラウザ上で実現できます。

構文と値

selector {
  hyphens: none | manual | auto;
}

値	意味
none	ハイフン分割を一切行わない。`` も無視
manual (既定)	`` や明示ハイフンがある場所でだけ分割可能
auto	ブラウザが言語辞書を使って自動分割。`lang` 属性必須

auto を効かせるための条件

hyphens: auto は単独では効きません。HTML 側で言語属性を指定する必要があります。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head>
<body>
  <p style="width:160px; text-align:justify; hyphens:auto;">
    This is an internationalization example.
  </p>
</body>
</html>

上記のように html lang="en" がないと、ブラウザはどの言語の辞書を使うか分からず、ハイフネーションを行いません。

言語が混在する場合

<p>本文は日本語ですが、ここだけ
   <span lang="en" style="hyphens:auto">internationalization</span>
   が英語です。
</p>

manual で狙った位置だけ分割する

長い単語の「ここなら切れていい」位置に ソフトハイフン () を入れると、行末に来た時だけハイフンが表示されます。

<p style="width:120px; hyphens:manual;">
  internationalization
</p>

表示上は internationalization のままですが、行末では inter- / national- / ization のどこかで折り返されます。

日本語との関係

日本語は基本的に1 文字単位で改行するため、英語のようなハイフネーションは不要です。hyphens: auto を指定しても、lang="ja" ではほぼ何もしません。

日本語の禁則処理（行頭禁則・行末禁則）は word-breakプロパティ や line-break プロパティで制御します。

ブラウザ対応とプレフィックス

2026 年現在は標準で hyphens が使えますが、旧 Safari 用にベンダープレフィックスを併記する保守的な書き方もあります。

.text {
  -webkit-hyphens: auto;
  -ms-hyphens:     auto;
  hyphens:         auto;
}

典型ユースケース

1. 狭幅レイアウトの英文記事

スマホやサイドバーなど幅が狭い領域に英文を流す時に、長い専門用語が改行できずレイアウトが崩れる問題を緩和します。

article p {
  hyphens: auto;
  text-align: justify;
}

2. 多言語サイトのレスポンシブ対応

@media (max-width: 600px) {
  :lang(en), :lang(de) {
    hyphens: auto;
  }
}

hyphenate-character / hyphenate-limit-chars

近年のブラウザでは、ハイフネーションの記号と粒度を制御する追加プロパティが利用できます。

プロパティ	役割	例
hyphenate-character	分割時に挿入する記号を変更	`hyphenate-character: "⸗";`
hyphenate-limit-chars	分割を許可する最小単語長と前後の文字数	`hyphenate-limit-chars: 6 3 2;`

p {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 2;   /* 6文字以上の語、前後3/2文字以上残す */
  text-align: justify;
}

justify と組み合わせるときのコツ

text-align: justify だけだと、単語間のスペースが広がりすぎて読みづらい「川 (river)」現象が起きがちです。hyphens: auto を併用するとスペースが詰まり、自然な組版になります。

FAQ

Q. CJK には効きませんか?
A. はい、原則的に効きません。日本語・中国語・韓国語は1 文字単位での折り返しが基本のため、word-break / overflow-wrap / line-break を使い分けます。

Q. auto なのにハイフンが入らない
A. ① lang 属性が設定されていない、② 親要素に英語以外の lang がある、③ そもそも単語が分割可能な長さに満たない、のいずれかを疑います。

Q. デザイン上ハイフンの形を変えたい
A. hyphenate-character: "-"; 等で記号を任意に変更可能です（対応ブラウザ要確認）。

言語別の挙動

lang	auto の効果	備考
en	強く効く（辞書が充実）	欧文組版で最も恩恵が大きい
de / fr	強く効く	長い合成語に効果絶大
es / it / pt	効く	—
ja / zh / ko	ほぼ無効	1 文字単位で折り返すため不要

実務での適用パターン

狭幅レイアウトのブログ・ニュースサイトで以下のように一括指定するのがおすすめです。

article {
  text-align: justify;
  hyphens: auto;
  overflow-wrap: anywhere;   /* 万一の長い文字列も折り返す */
  word-break: normal;
}

/* 日本語側はハイフネーション無効でも問題なし */
:lang(ja) article {
  text-align: left;
  hyphens: manual;
}

ページ一覧

その他