Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。
タイポグラフィ Newly available

Hyphenate character

ハイフネーション処理で行末に挿入されるハイフン文字をカスタマイズできます。デフォルトのハイフン（U+2010）の代わりに、言語や表記ルールに適した文字を指定できます。多言語対応のWebサイトで、各言語の組版慣行に合わせたハイフネーション表示を実現します。

ハイフネーション行末処理

概要

ハイフネーション処理で行末に挿入されるハイフン文字をカスタマイズできます。デフォルトのハイフン（U+2010）の代わりに、言語や表記ルールに適した文字を指定できます。多言語対応のWebサイトで、各言語の組版慣行に合わせたハイフネーション表示を実現します。

対応ブラウザ

デスクトップ

Chrome 106+
Edge 106+
Safari 17+
Firefox 98+

モバイル

Chrome Android 106+
Safari iOS 17+
Firefox Android 98+

基本構文

CSS 
.text {
  hyphens: auto;
  hyphenate-character: '-';
}
.japanese {
  hyphenate-character: '=';
}

実務での使いどころ

  • 多言語コンテンツのハイフン文字カスタマイズ

    言語や文化圏に応じたハイフン記号を設定し、正しい組版ルールに基づいたテキスト表示を実現します。

注意点

  • hyphensプロパティがautoに設定されている場合にのみ効果があります。手動ハイフネーション（­）には影響しません。

アクセシビリティ

  • ハイフン文字のカスタマイズはスクリーンリーダーの読み上げに影響しないことを確認してください。

参考リンク