Newly available 条件付きOK。言語によって辞書の品質に差がある。英語やドイツ語では良好に動作するが、日本語では効果が限定的。
タイポグラフィ Newly available

hyphens (CSS Hyphenation)

hyphens: auto を指定すると、ブラウザの辞書に基づいて適切な位置で単語を分割しハイフンを挿入する。lang 属性が正しく設定されている必要がある。manual は ­ の位置でのみハイフネーションし、none はハイフネーションを無効にする。

テキスト改行

概要

hyphens: auto を指定すると、ブラウザの辞書に基づいて適切な位置で単語を分割しハイフンを挿入する。lang 属性が正しく設定されている必要がある。manual は ­ の位置でのみハイフネーションし、none はハイフネーションを無効にする。

対応ブラウザ

デスクトップ

Chrome 88+
Edge 88+
Safari 17+
Firefox 43+

モバイル

Chrome Android 55+
Safari iOS 17+
Firefox Android 43+

基本構文

CSS 
/* 自動ハイフネーション */
p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* 手動ハイフネーション */
.manual {
  hyphens: manual;
}

実務での使いどころ

  • 狭いカラムのテキスト

    新聞やカードコンポーネントの狭い幅で、長い単語がはみ出すのを防ぎつつ自然な改行を実現する。

注意点

  • hyphens: auto は lang 属性に依存する。HTML 要素に正しい言語を指定すること。
  • ハイフネーション辞書はブラウザや言語によって異なるため、結果が環境で変わる可能性がある。

フォールバック戦略

CSS 
/* フォールバック */
p {
  overflow-wrap: break-word;
  hyphens: auto;
}

アクセシビリティ

  • ハイフンで分割された単語でも、スクリーンリーダーは元の単語として正しく読み上げる。

参考リンク