なぜ「空白」ひとつでレイアウトは崩れるのか？`white-space`プロパティを完全攻略する
フロントエンドの現場で、「なぜかここだけ改行される」「テキストが枠からはみ出す」といった軽微だが致命的なレイアウト崩れに遭遇したことはないだろうか？
多くのエンジニアがCSSのレイアウトプロパティ（FlexboxやGrid）に注力する一方で、実は「テキストの扱い」というHTML/CSSの基礎中の基礎で足元をすくわれているケースが驚くほど多い。
特に`white-space`プロパティは、ブラウザが裏側でどうテキストを解釈しているかという「レンダリングの根幹」に関わる部分だ。今回は、ただ仕様をなぞるのではなく、実務で明日から使える「制御の勘所」を解説しよう。
—
1. ブラウザは「空白」をどう見ているのか？
まず、大前提としてブラウザのデフォルト挙動を理解しておこう。通常、HTML内の連続するスペースや改行は、ブラウザによって「ひとつの半角スペース」に圧縮される（`normal`の状態）。
しかし、`a`タグや`span`タグ、あるいは`code`タグの中で意図しない改行や詰まりが発生するのは、この「デフォルトの圧縮処理」が私たちの意図とズレるからだ。これを強制的に制御するのが `white-space` プロパティの役割である。
実務で頻出する3つの値の使い分け
| 値 | 折り返し | 空白・改行の扱い | 主な用途 |
| :— | :— | :— | :— |
| `nowrap` | しない | 圧縮される | ボタン内テキスト、ヘッダーのメニュー |
| `pre` | しない | そのまま保持 | ソースコード表示、アスキーアート |
| `pre-wrap` | する | そのまま保持 | 掲示板、ユーザー投稿のコメント欄 |
—
2. 実践！現場で役立つ `white-space` の活用テクニック
ケースA：ボタン内のテキストを絶対に改行させない
UIデザインにおいて、ボタン内のテキストが2行になってしまうと、意図した高さが崩れてしまうことがある。これを防ぐには `nowrap` が鉄板だ。
.button-text {
/ 親要素の幅を超えても改行させない /
white-space: nowrap;
/ もし幅が足りない場合は、省略記号で美しく閉じるのがプロの流儀 /
overflow: hidden;
text-overflow: ellipsis;
}
ケースB：ユーザーの入力をそのまま表示する（`pre-wrap`の真価）
例えば、お問い合わせフォームの確認画面や、CMSで作成したブログの本文など、ユーザーが改行した通りに表示させたい場面がある。ここで `pre` を使うと、コンテナの幅を超えて突き抜けてしまう（いわゆる「レイアウト爆発」の原因）。ここで選ぶべきは `pre-wrap` だ。
.user-comment-body {
/ 改行とスペースを維持しつつ、コンテナの幅で折り返す /
white-space: pre-wrap;
/ 念のため、長いURLなどが突き抜けないようにするガード /
word-break: break-word;
}
—
3. `code`タグと`time`タグへの応用的な視点
インライン要素である `code` や `time` は、文脈によって扱いが異なる。
- `code`タグ: 本来は `pre` とセットで使うことが多いが、インラインで使う場合は `white-space: nowrap;` を適用することで、コマンドラインのような「一塊の命令」として視覚的に独立させることができる。
- `time`タグ: スマホで見ると日付の途中で改行されてしまい、可読性が落ちることがある。これも `white-space: nowrap;` を適用して、「2023年10月27日」という情報の塊を保護するのがベストプラクティスだ。
コピペで使える「可読性向上」スタイル例
/ チームで共有しているユーティリティクラスのイメージ /
/ 改行を禁止する汎用クラス /
.u-text-nowrap {
white-space: nowrap;
}
/ ユーザー投稿などの整形済みテキスト用クラス /
.u-text-pre-wrap {
white-space: pre-wrap;
/ 連続する英数字が親要素を突き抜けるのを防ぐ /
word-wrap: break-word;
overflow-wrap: break-word;
}
—
最後に：なぜこれを知っておく必要があるのか？
UI/UXのクオリティは、こうした「極めて細かい挙動の制御」の積み重ねで決まる。
「なんとなく CSS を当てていたら治った」という状態から脱却し、「ブラウザが空白をどう処理しているから、このプロパティを当てる必要がある」と論理的に説明できることが、シニアエンジニアへの第一歩だ。
特にレスポンシブデザインにおいては、画面幅が変わるたびにテキストの折り返し位置が変わる。その時、`white-space` を適切に制御できているかどうかで、プロダクトの品格は大きく変わるはずだ。
明日からの開発で、`white-space` をただの「改行制御ツール」ではなく、「テキストの生命線を守る守護者」として意識してみてほしい。きっと、今まで気づかなかったレイアウトの細部が見えてくるはずだ。
コメント