プロンプトとコンテキスト
多言語対応のコンテンツサイトで、カードの見出しが狭い行に単語を1つだけ残してしまったり、長い段落の末尾に孤立した単語が残ったりしています。デザインチームは1行のCSSでの修正を求めていますが、ページは編集機能、古いブラウザ、動的フォントもサポートする必要があります。text-wrap: balance、text-wrap: pretty、通常の wrap、stable を比較し、段階的な導入計画を提案してください。
この質問は、フロントエンド、デザインシステム、コンテンツプラットフォームの面接に適しています。重要なのは、折り返しを固定幅やJavaScriptによる計測結果ではなく、レイアウトの振る舞いとして捉えることです。
面接官が見ているポイント
優れた回答では、短い見出しや引用に balance を使用し、計算コストの高さを認識した上で長い文章に pretty を検討し、どちらの値も要素のインラインサイズを変更したり white-space: nowrap を上書きしたりしないことを説明します。また、contenteditable に対する stable、多言語テスト、静的フォールバック、アクセシビリティについてもカバーします。
最初に確認すべき明確化の質問
- そのテキストは見出し、カードの要約、本文、編集可能なフィールドのどれで、何行程度を想定していますか？
- 孤立行（orphan）の防止を目的としていますか、それとも各行の長さを均等に見せることを目指していますか？
- コンテナのスタイルには
white-space、固定の高さ、クリッピング、またはline-clampが含まれていますか？ - どの言語、フォント読み込み状態、ブラウザバージョンが対象範囲ですか？
- レガシーブラウザでもまったく同じ改行を維持する必要がありますか、それとも通常の折り返しが許容可能なフォールバックとなりますか？
30秒で答えるフレームワーク
「コンテンツの種類に応じて選択します。短い見出しには text-wrap: balance を使用し、orphan の抑制が重要な場合のみ本文に pretty を検討し、一般的なコンテンツは wrap のままにし、編集可能エリアには stable を検討します。これらの値はソフトな折り返しを変更するものであり、要素の幅を変更するものではありません。white-space: nowrap、固定の高さ、クリッピングには個別の判断が必要です。読みやすいデフォルトを維持し、対応ブラウザでプログレッシブエンハンスメントを行い、視覚面とパフォーマンスの両面で言語、フォント、レスポンシブなサイズ、編集時の挙動をテストします。」
ステップごとの詳細な回答
ステップ 1: 4つの戦略を区別する
wrap は通常の改行ルールに従い、nowrap はソフトな折り返しを無効にします。balance は、見出しや引用などの短いテキストに対して、より均等な行の長さを追求します。pretty は、より低速なアルゴリズムを使用して長いテキストの見た目を向上させ、孤立行（orphan）を減らします。stable は contenteditable を対象とし、ユーザーが編集中でも前の行をより安定して保持します。
ステップ 2: 見出しに制御可能な境界を与える
バランス調整を機能させるには、実際に折り返せる機会が必要です。text-wrap: balance を適用する前に、max-inline-size や適切なコンテナ幅を設定してください。1行の文字列にはバランスを取る対象がありません。翻訳、フォント、ビューポート幅によって結果が変わるため、英語や中国語に対して手動で <br> 改行を入れるのは避けてください。
.card-title {
max-inline-size: 24ch;
text-wrap: balance;
}ステップ 3: pretty を意図的に使用する
pretty は本文、解説文、長めの引用に適していますが、通常の折り返しよりも多くの計算を必要とします。テキストの品質がコストに見合う場所でのみ使用し、全称セレクタへの適用は避けてください。1〜2行の見出しには、balance の方が直接的で適切な選択肢です。
ステップ 4: white-space とクリッピングの競合を解決する
white-space: nowrap は明示的に折り返しを行わないことを指定するため、バランス調整と競合します。バランスの取れた行を期待する前に、これを削除するか上書きしてください。固定の高さ、overflow: hidden、line-clamp は依然としてテキストをクリップする可能性があるため、高さを伸ばすか、省略記号を表示するか、全文を表示するかをプロダクト側で決定する必要があります。
ステップ 5: パフォーマンスの境界を理解する
ブラウザは複数の改行パターンを試行します。MDNおよびChromeのドキュメントでは、短いテキストには balance を維持し、長い文章には pretty を検討することが推奨されています。どちらかがJavaScriptよりも常に高速であると決めつけないでください。実機でレイアウト、フォント読み込み、長いリストのレンダリングを計測してください。
ステップ 6: 言語とフォントの変更をカバーする
同じ見出しでも、中国語、英語、ドイツ語、アラビア語で改行可能な位置が異なります。言語の切り替え、フォールバックフォント、ズーム、狭い画面、広い画面でテストしてください。要件として保証すべきは、単一言語における厳密な行のスナップショットではなく、オーバーフローがないこと、読みやすい階層構造、および完全なコンテンツ表示です。
ステップ 7: 編集可能コンテンツには stable を選択する
ユーザーが contenteditable の途中を編集する際、リフローによってキャレット付近の行が動いてしまうことがあります。text-wrap: stable は編集箇所より前の行を安定させることができますが、見出しの美観向上戦略ではなく、フィールドの高さを管理するものでもありません。編集の安定性が実際に課題となっている場合にのみ使用してください。
ステップ 8: プログレッシブエンハンスメントと検証を設計する
通常の wrap と伸び縮み可能な高さから始め、サポートされている環境で balance や pretty を追加します。機能サポートに応じたCSSでエンハンスメントを階層化し、それらがなくても重要なコンテンツが利用できるようにします。計算されたスタイル、オーバーフロー、CLS、長いリストでのコスト、フォントパス、スクリーンリーダーの読み上げ順序を検証してください。
トレードオフと制約事項
balance は短いテキストの視覚的なリズムを改善しますが、要素自体を縮小することはありません。カードの枠線、シャドウ、配置は依然としてコンテナによって決まります。pretty はレイアウト処理を増やしながら本文を改善できます。どちらも編集上の判断、改行ルール、overflow-wrap、アクセシブルな全文展開の代わりにはなりません。
現在のブラウザサポートが恒久的に保証されているとは考えないでください。CSS Text Level 4 にはまだ実装上の差異があるため、プロダクトの対象マトリクスでテストしてください。重要な見出しには通常の折り返しパスを保持し、クリップされたコンテンツにはアクセシブルな名前や展開手段を提供してください。
ロールアウト計画と検証
見出し、要約、本文のコンポーネントをそれぞれ1つずつパイロット版として選定します。言語、最大行数、コンテナサイズ、フォントの状態を記録します。見出しには balance を使用し、orphan の問題が再現する場合にのみ pretty を試し、エディタ内では stable を個別に評価します。Chromium、Firefox、Safari、および必要なレガシーブラウザで、オーバーフロー、レイアウトシフト、キャレットの安定性を確認します。
コンテンツタイプ、最大行数、white-space の前提条件、フォールバックのスタイル、計測指標をドキュメント化します。フォント、コンテナ幅、翻訳が変更されたときは常にビジュアルリグレッションテストを実行し、単一のスナップショットによって多言語での改行リグレッションが見落とされないようにします。
よくある落とし穴とフォローアップ
すべての要素に balance を適用してしまう
グローバルに適用すると計算リソースを浪費し、長い文章の見た目を改善することもありません。見出し、引用、バランス調整の恩恵を受ける短いテキストに限定してください。
balance が要素の幅を変更すると誤認する
これはソフトな折り返しのみを変更し、ボックスを内容に合わせて縮小（shrink-wrap）するわけではありません。レイアウトと max-inline-size が引き続きカードのインラインサイズを制御します。
nowrap や固定の高さを無視する
これらのルールが存在すると、テキストがオーバーフローしたりクリップされたりする可能性があります。折り返しや高さの伸長が許可されているかを判断する前に、計算されたスタイルを検査してください。
pretty を無料の orphan 対策と見なす
折り返しの品質を上げるには追加の処理が必要です。単一のデモに頼るのではなく、長いリストやローエンドデバイスで測定してください。
なぜ編集可能な領域で balance を使わないのか？
編集中にリフローが発生すると、キャレット周辺が動いてしまう可能性があるためです。編集の安定性には stable を評価し、balance は読み取り専用の表示用見出しのために確保しておきます。