プロンプトとコンテキスト
あるコンテンツサイトには、カードの見出し、記事の要約、長文の本文、編集可能なメモが含まれています。デザインチームは、短い見出しをバランス良く見せ、本文の孤立単語・行を減らし、編集中にキャレットより前の行が安定することを求めています。同時にチームは、予測可能なレイアウトコストとレガシーブラウザでの挙動も必要としています。text-wrap-style がソフトラップ（自動折り返し）の選択にどのように関与するかを説明し、各値をどのように選択、制限、検証するかを述べてください。
この質問はフロントエンド、デザインシステム、コンテンツプラットフォームの役割に適しています。ポイントは、これが利用可能な折り返し位置、幅、言語規則を変更するのではなく、折り返しの「選択アルゴリズム」を変更する点であると理解していることです。
面接官が評価するポイント
優れた回答では、auto、balance、pretty、stable の各目的（デフォルトのパフォーマンス、短いブロックの均等化、長文での低速だが優れたレイアウト、contenteditable に対する安定した編集）を明確に区別します。また、行数制限、text-wrap-mode: nowrap、言語および改行ルール、CLS、互換性、計測方法についてもカバーしている必要があります。
最初に確認すべき明確化の質問
- どのコンテンツが短い見出し、要約、長文本文、または編集可能フィールドに該当するか？
- 優先事項は視覚的なバランス、孤立行の削減、編集の安定性、レイアウトコストの最小化のどれか？
- コンテンツの長さ、ロケール、フォント読み込み動作、コンテナ幅はどうなっているか？
- ファーストビューおよびスクロールリストで利用可能なレイアウトバジェットはどの程度か？
- レガシーブラウザでは自動折り返しを維持すべきか、それともスクリプトによる機能拡張を行うべきか？
30秒での回答
「コンテンツに応じて値を段階分けします。短い見出しには balance を使用し、測定されたバジェット内で重要な本文に pretty を検討し、編集可能な領域には stable を使用し、その他の場所には auto を維持します。これらの値は既存のソフトラップ候補を選択するだけなので、幅、改行、言語ルールは引き続き重要です。安全なフォールバックとして auto を提供し、スクリーンショットだけで判断するのではなく、実際の多言語コンテンツ、リストのレンダリングコスト、CLS、編集挙動を測定します。」
ステップごとの解決策
ステップ 1: 何が変化するのかを定義する
text-wrap-style は、ブラウザに対して既存のソフトラップ候補からどのように選択するかを指示します。nowrap を強制的に折り返させるわけではなく、overflow-wrap、hyphens、またはコンテナのサイズ設定を置き換えるものでもありません。
ステップ 2: 短い見出しに balance を使用する
balance は、制限された行数にわたってテキストをより均等に配分しようとするため、見出し、キャプション、短い要約に適しています。ブラウザは対象となる行数を制限しているため、長文本文でグローバルな最適化が行われると想定してはなりません。
.card-title {
text-wrap-style: balance;
max-inline-size: 32rem;
}ステップ 3: pretty を選択的に使用する
pretty は全体的な構成の向上と孤立行の削減を優先しますが、auto よりもコストがかかります。これを記事の本文や重要なマーケティングコピーに限定し、全体に有効化するのではなく、長文テキスト、フォント変更、低スペック端末での影響を測定してください。
ステップ 4: 編集用途に stable を使用する
stable は contenteditable などの編集体験を対象としており、ユーザーが入力している間、キャレットより前の行を可能な限り安定させます。これはバージョン履歴、Undoスタック、あるいは共同編集の競合解決ではありません。
ステップ 5: text-wrap-mode と改行の制御
text-wrap-mode が nowrap の場合、text-wrap-style は効果を持ちません。また、長いURL、中国語、ドイツ語の複合語、混在スクリプトは、overflow-wrap、word-break、hyphens、および言語メタデータによっても制御されるため、これらを併せて設計します。
ステップ 6: レイアウトとパフォーマンスの境界を設定する
折り返しの変更は、ブロックの高さ、カードグリッド、ファーストビューのレイアウトを変化させる可能性があります。仮想リスト、検索結果、サーバーサイドレンダリングされたページについては、レイアウトシフト、スタイル計算コスト、フォント読み込み後の再レイアウトを記録してください。固定幅の開発用スクリーンショットだけでは不十分です。
ステップ 7: 互換性とプログレッシブエンハンスメントを計画する
未対応のブラウザは通常、その宣言を無視し、デフォルトの折り返しを維持します。auto をベースの動作とし、サポートの検出またはセレクタの後に拡張します。ブラウザターゲットとプロダクトのメリットが複雑さとアクセシビリティのリスクに見合わない限り、すべてのアルゴリズムを模倣する文字単位の測定スクリプトを作成すべきではありません。
ステップ 8: 多言語受け入れテストを構築する
中国語、英語、長いドイツ語の単語、アラビア語RTL、日本語、絵文字、ダイナミックフォント、ズーム、編集、コピー／ペースト、コンテンツ更新をテストします。First Paint、リストのスクロール、フォーカス、見出しの高さ、孤立行の数、レガシーブラウザのフォールバックを比較し、視覚的な調整によって可読性が損なわれないようにします。
トレードオフと境界
balance は短いブロックに適し、pretty は高コストながら構成を優先し、stable は編集時の行の安定性に対処します。auto は一般的で予測可能なベースラインです。いずれもセマンティクス、コンテンツ、またはソフトラップ候補のセットを変更しません。
タイポグラフィの値は、コンテナ、フォント、ロケール、改行、レスポンシブのルールとともに評価する必要があります。高頻度のリストやライブエディタにおいて、グローバルルールを適用するよりも局所的に有効化する方がパフォーマンスバジェットを管理しやすくなります。
ロールアウト計画と検証
カードの見出し1つ、記事の本文、ノートエディタでパイロット運用を行います。コンテンツ長の分布、行数、フォント、パフォーマンスバジェットを記録します。ベーススタイルには auto を維持し、一致するコンテンツタイプに対して balance、pretty、または stable を有効化します。
根拠、サポートマトリックス、長文の制限、言語ルール、指標を文書化します。視覚的、パフォーマンス、キーボード、編集に関するリグレッションを実際のコンテンツでテストし、拡張機能を無効にした状態でもベースラインが引き続き使用可能である証拠を保持します。
よくあるミスとフォローアップ
balance を任意の長さに対するグローバルな最適化として扱う
ブラウザはバランス調整を行う行数を制限しているため、長文本文のすべての行が均等化されると想定すべきではありません。見出しや短い要約に限定してください。
サイト全体に pretty を適用する
孤立行を減らすことでレイアウトの処理負荷が増加する可能性があります。重要な本文でパイロット運用を行い、長文テキストや低スペック端末のデータを使用して境界を設定してください。
stable ですべてのエディタの問題を解決しようとする
stable は折り返しの安定性にのみ影響します。Undo、共同編集、キャレットのセマンティクスを提供するわけではないため、エディタには独自の状態管理とアクセシビリティ設計が依然として必要です。
nowrap とロケールルールを無視する
nowrap はプロパティを無効にし、改行および言語メタデータが利用可能な折り返し位置を決定します。CSSとロケールを併せてテストしてください。
見出しがまだ読みにくい場合はどうすべきか？
balance、改行、フォントサイズ、コピーを変更する前に、コンテナ幅、フォントの読み込み、行数制限、ロケール、利用可能な折り返しポイントを確認してください。ラップ値を繰り返し切り替えるだけでは診断になりません。