なぜその「改行」は無視されるのか？ CSS `white-space` プロパティの深淵を紐解く
フロントエンドの現場で、「デザインカンプ通りにテキストが改行されない」「意図せぬ空白が入り込む」といったトラブルに頭を抱えた経験はありませんか？
特に `span` や `a` タグといったインライン要素を扱う際、CSSの `white-space` プロパティは、ブラウザが「ソースコード上の空白や改行をどう解釈するか」を決定する、いわばレンダリングエンジンの根幹に関わる設定です。
今回は、中級エンジニアなら避けて通れないこのプロパティの挙動を、ブラウザの裏側の挙動まで含めて深掘りします。
—
1. ブラウザは空白をどう「掃除」しているのか？
HTMLを書く際、エディタ上でインデントを整えたり改行を入れたりしますよね。しかし、ブラウザのレンダリングエンジンは、デフォルトで以下の「空白の圧縮（White Space Collapsing）」を行います。
1. 連続する空白・タブ・改行は、半角スペース1つにまとめられる。
2. 要素の開始・終了タグ前後の空白は削除される。
3. `white-space` が `normal` の場合、親要素の幅に合わせて自動改行される。
この「おせっかいな自動整形」を制御するために存在するのが `white-space` プロパティです。
—
2. 現場で使い分けるべき `white-space` の全貌
実務で頻出する主要な値を整理しましょう。
`nowrap`：一行に強制固定
ボタン内のテキストや、テーブルのヘッダーなど、「絶対に改行させたくない」箇所で使います。
- 挙動: `normal` と同じく空白を圧縮するが、`br` タグ以外での自動改行を無効化する。
`pre`：ソースコードの忠実再現
`
` タグのデフォルト値です。
- 挙動: 空白も改行もそのまま表示。自動改行は行わない。コードブロックの表示に必須。
`pre-wrap`：崩れない柔軟性（最強の汎用性）
個人的に最も信頼しているのがこれです。
- 挙動: 空白や改行は保持するが、親要素の幅を超えたら自動的に折り返してくれる。ユーザー投稿型のコメント欄や、Markdownから変換されたテキストにはこれ一択です。
`pre-line`：改行だけ生かす
- 挙動: 連続する空白は圧縮するが、改行は保持する。
---
3. 実践！コピペで使える「空白制御」のベストプラクティス
以下のコードは、それぞれの挙動を比較検討するために設計したサンプルです。手元の環境でぜひ試してみてください。
/ 共通のベーススタイル /
.demo-box {
border: 1px solid #ccc;
width: 300px;
padding: 10px;
margin-bottom: 20px;
font-family: monospace;
}
/ 1. nowrap: どんなに長くても1行に収める（あふれたら親要素を突き抜ける） /
.is-nowrap {
white-space: nowrap;
}
/ 2. pre: ソースコードのインデントをそのまま再現する /
.is-pre {
white-space: pre;
}
/ 3. pre-wrap: 改行を活かしつつ、幅で折り返す（実務で最も安全） /
.is-pre-wrap {
white-space: pre-wrap;
}
/ 4. pre-line: 空白は無視するが、改行だけは守る /
.is-pre-line {
white-space: pre-line;
}
改行されずに突き抜けます。
そのまま反映されつつ、
幅が狭まれば自動で折り返します。
これが一番便利です。
---
4. シニアからのアドバイス：ハマりどころと注意点
最後に、現場でよくある「落とし穴」を2つ共有します。
- `pre-wrap` と `word-break` のコンビネーション:
`pre-wrap` を使っていても、長いURLなどが連続していると要素を突き抜けることがあります。そんな時は `word-break: break-all;` を併用するのではなく、`overflow-wrap: break-word;` を使いましょう。前者は単語の途中で容赦なく切りますが、後者は単語の区切りを尊重するため、UXの観点から推奨されます。
- `inline-block` との相性:
`span` に `white-space: nowrap;` を適用した際、周囲の空白が「文字」としてカウントされ、意図しない隙間ができることがあります。これはフォントサイズの `0` を親要素に指定するハックもありますが、基本はHTMLのタグを密接させるか、不要な空白を削除するアプローチを検討してください。
まとめ
`white-space` を制することは、テキストの「リズム」を制することです。仕様を暗記する必要はありませんが、「ブラウザはデフォルトで空白を圧縮している」という大前提を忘れずに、デザインの意図に合わせて最適なプロパティを選択できるようになれば、コーディングの精度は格段に向上します。
ぜひ、次回の実装から試してみてください。コードの「余白」一つひとつに責任を持つ。それがプロの仕事です。
コメント