hyphens プロパティ

最終更新：2026-09-13

hyphens hyphens プロパティ

hyphens プロパティは、ブラウザが単語の内部でハイフン（-）を使って改行（断詞）するかどうかを制御します。英語のような多音節言語の組版でよく使われます。自動断詞を有効にすると、ブラウザは言語の辞書に基づいて適切な位置にハイフンを挿入し、コンテナの境界でより自然に折り返され、不揃いな隙間が減ります。

カテゴリ
初期値	manual
継承	はい
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

hyphens: none | manual | auto;

⚙️ 値

値	タイプ	説明
`none \| manual \| auto`	キーワード	ハイフンによる断詞の動作

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
hyphens	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： 自動断詞には HTML に lang 属性（lang="en" など）が必要で、ブラウザは言語辞書に基づいて断詞位置を決めます。

重要： （ソフトハイフン）を使うと、許可する断詞位置を手動で指定できます。ブラウザは実際に改行が必要なときだけハイフンを表示します。

❓ よくある質問

Qhyphens プロパティは中国語テキストに効果がありますか？

A中国語には単語の境界という概念がないため、hyphens は中国語テキストに基本無効です。中国語の折り返しは通常 word-break や overflow-wrap で制御します。

Qhyphens の manual と auto の違いは？

Amanual は明示的に指定した位置（ソフトハイフン）でのみ改行します。auto はブラウザが言語辞書に基づいて自動的に断詞位置を選び、より賢いですが正しい lang 属性が必要です。

QCSS で英文テキストを自動断詞するには？

Ahyphens: auto を設定し、HTML に正しい lang 属性（lang="en" など）があることを確認してください。ブラウザは辞書に従って語尾にハイフンを付けて改行します。hyphens は単語が収まらないときだけ改行し、text-align: justify と組み合わせると最も効果的です。

Qhyphens のブラウザ対応状況は？

A現代のブラウザはすべて対応していますが、iOS Safari は -webkit-hyphens プレフィックスが必要です。言語辞書に依存するため、同じテキストでも言語環境が異なると断詞位置が変わることがあります。