text-wrap と -webkit-line-clamp の組み合わせ

組み合わせの実態

UI でよく見るパターン：カードタイトルや説明をN行にクランプして省略記号を表示する。自然な疑問は「テキストが後でクランプされる場合でも text-wrap: balance や pretty は効くのか？」です。

答えはイエス。 両プロパティとも、-webkit-line-clamp が表示出力を切り詰める 前 の行レイアウトのフェーズで実行されます。

例：2行クランプとバランス済みタイトル

.card-title {
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.3;
}

ブラウザは：

1. 自然な改行位置を計算
2. balance を適用し、行間で単語を再配分
3. 視覚出力を2行に切り詰め、2行目末に省略記号を追加

balance 結果が3行になる場合、1行目と2行目が省略記号付きで表示されます。「バランス済み」になっているのは、2行に収まった分だけです。

Pretty + line-clamp（説明文向け）

3〜4行にクランプされる長めの説明には：

.product-description {
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

pretty は、クランプが起動する前の自然な最終行を最適化します。結果として、可視3行目が単語1つだけのオーファンで終わることを避けられます。

微妙な落とし穴

テキストが balance なしでちょうどN行に収まる長さの場合、balance を適用すると N+1 行に折り返してしまうことがあります（balance は「少ない不均等な行」より「多くの均等な行」を好むため）。クランプ結果がコンテンツを失う可能性があるので、QA で要注意です。

モダンな代替：プレフィックスなし line-clamp

最近の Chromium と Safari はプレフィックスなしの標準をサポートしています：

.card-title {
  text-wrap: balance;
  line-clamp: 2;
  overflow: hidden;
}

Firefox は実装中ですがまだ未リリース（2026年初頭）。当面は両形式を併記してください：

.card-title {
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}