ボタンラベルへの text-wrap: nowrap

ボタン折り返し問題

「カートに追加」と書かれたボタンは、320px のモバイル画面でも絶対に2行になってはいけません。しかしデフォルトの CSS ではコンテナが狭くなった瞬間に折り返してしまいます。さらに、横並びボタンの中の1つだけが折り返ると、垂直方向のアラインメントも崩れます。

モダンな解決策

.btn {
  text-wrap: nowrap;
  /* 古い等価構文: */
  /* white-space: nowrap; */
}

text-wrap: nowrap は行分割の挙動としては white-space: nowrap と同じですが、統一された text-wrap プロパティファミリーの一員なので、近くで他の text-wrap 値も指定している場合に意図が明確になります。

ボタンがオーバーフローした場合

ラベルがコンテナに本当に収まらない場合、nowrap は水平にオーバーフローを起こします。overflow と text-overflow を組み合わせて優雅に劣化させましょう：

.btn {
  text-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

これでレイアウトを壊さずに「ニュースを購読…」のような表示になります。トレードオフはユーザーがフルラベルを見られないことなので、重要でないボタン（プライマリ CTA は避ける）に限定してください。

多言語 UI

ドイツ語のラベルは悪名高く長いです（"Geschäftsbedingungen" = "Terms & Conditions"）。国際化された UI では以下を検討してください：

• 折り返しを許可（デフォルト）し、ボタンに合理的な min-width をセットして潰れすぎないようにする
• 翻訳ファイルでより短い表現を使う
• nowrap はアイコンボタンや「OK」「Cancel」のような短い汎用ラベルに限定する

アクセシビリティ

どのアプローチを選んでも、text-overflow: ellipsis で重要なアクションラベルを切り詰めてはいけません。フルテキストはスクリーンリーダーには残りますが（DOM のテキスト経由）、視力の弱い目視ユーザーがコンテキストを失います。