text-wrap: balance

概要

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

対応ブラウザ

基本構文

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

/* より広い指定 */
.balanced-heading {
  text-wrap: balance;
  max-width: 40ch;
}

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN: text-wrap
• Can I use: text-wrap: balance