Newly available 条件付きOK。見出しやキャプションなど短いテキストに使用すること。非対応ブラウザでは通常の折り返しになるため、プログレッシブ・エンハンスメントとして安全に導入可能。

text-wrap: balance

text-wrap: balance はブラウザがテキストの折り返し位置を最適化し、各行の幅がなるべく均等になるよう調整する。従来は JavaScript や手動での改行が必要だった見出しのバランス調整を CSS だけで実現できる。パフォーマンスのため、多くのブラウザは 6 行以下のテキストに制限している。

テキストタイポグラフィ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.text-wrap-style.balance
130
130
124
17.5
130
17.5
CSS プロパティ
balance
114
114
121
17.5
114
17.5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
h1, h2, h3 {
  text-wrap: balance;
}

/* Broader specification */
.balanced-heading {
  text-wrap: balance;
  max-width: 40ch;
}

ライブデモ

barans none

text-wrap: balance barans none demo.

プレビュー全画面表示

Balanceapply

text-wrap: balance Balanceapply demo.

プレビュー全画面表示

Max-widthlimit with

text-wrap: balance Max-widthlimit with demo.

プレビュー全画面表示

実務での使いどころ

  • 記事見出しの美しい折り返し

    ニュースサイトやブログの見出しで、行の長さが不揃いになるのを防ぎ、プロフェッショナルな印象を与える。

注意点

  • 長い段落に適用するとパフォーマンスに影響する可能性がある。6行以下のテキストに限定すること。
  • テキスト幅が変わるため、厳密なレイアウト計算に依存している場合は注意が必要。

アクセシビリティ

  • テキストの内容や読み上げ順序には影響しない。視覚的な改善のみ。

参考リンク