Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Hyphenate character

hyphenate-character は CSS のプロパティで、ハイフンによる改行の前で行末に使用される文字（または文字列）を設定します。

自動ハイフネーション、ソフトハイフネーションのどちらでも、指定された hyphenate-character の値に従って表示されます。

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
hyphenate-character
106
106
98
17
106
17
auto
6
79
98
5.1
18
5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (6)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)

基本構文

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

ライブデモ

default (‐)

CSS default (‐) demo.

プレビュー全画面表示

custom (=)

CSS custom (=) demo.

プレビュー全画面表示

doublehyphen (--)

CSS doublehyphen (--) demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク