`pre`要素の「行の折り返し」問題に終止符を。現場で本当に使えるCSS最適解
フロントエンドエンジニアの皆さん、お疲れ様です。コードレビューをしていると、今でもたまに見かけるのが「`pre`要素の中でテキストが画面を突き破ってレイアウトを破壊している」という光景です。
特にログ出力や生成されたJSONを表示するUIにおいて、`pre`タグの扱いは地味ながら、ユーザー体験（UX）に直結する重要なポイント。今日は、公式ドキュメントを読んでも意外と腹落ちしにくい「`pre`要素内の折り返し制御」について、ブラウザの挙動という裏側の話も含めてガッツリ深掘りします。
—
なぜ `pre` タグは「空気を読まない」のか
そもそも、HTMLの`pre`要素は「空白や改行をそのまま表示する（Preformatted Text）」という役割を持っています。ブラウザのデフォルトスタイルシートを見ると、`white-space: pre;` が適用されていますね。
これが意味するのは、「行の終わり（改行コード）が来るまで、絶対に折り返さない」というブラウザへの強い命令です。たとえ親要素の幅が狭まっても、`pre`の中身は頑として横に伸び続けます。結果、スマホで見ると横スクロールバーが突き出たり、コンテナを突き抜けてレイアウトが崩壊したりするわけです。
現代の実務におけるベストプラクティス
では、どう制御するのがスマートか。結論から言えば、「基本は折り返し、必要に応じてスクロール」というハイブリッドなアプローチが、今のフロントエンド開発における正解です。
以下のCSSを適用してみてください。
.code-block {
/ 1. 基本的に長い行は折り返す（これが現代の標準） /
white-space: pre-wrap;
/ 2. 単語の途中で不自然に切れないようにする /
word-break: break-all;
/ 3. コンテナをはみ出さないようにガード /
max-width: 100%;
/ 4. もしそれでも溢れる場合（深いネストなど）は横スクロールさせる /
overflow-x: auto;
}
なぜこの設定が「最強」なのか
1. `white-space: pre-wrap;`:
これが肝です。`pre`の「空白を維持する」という特性は残しつつ、「コンテナの幅に達したら折り返す」という柔軟性を付与します。これだけで9割のケースは解決します。
2. `word-break: break-all;`:
URLや長いハッシュ値など、スペースを含まない文字列が一行に続いた場合、`pre-wrap`だけでは対応できません。これを加えることで、強制的に単語の途中で折り返し、レイアウトの崩壊を防ぎます。
3. `overflow-x: auto;`:
モバイル環境や、意図的に「一行で読ませたい」ケースに備えた安全策です。折り返したくないケースでは、`white-space: pre;` に切り替えるだけで、このスクロール設定が活きてきます。
—
実践的なサンプルコード
そのままコピペして、お手元のプロジェクトに適用してください。実務でありがちな「タイトル付きのコードブロック」を想定した構成です。
{
"status": "success",
"data": "この行が非常に長く、画面を突き抜けてしまうような場合でも、このCSS設定があれば安全に折り返されます。"
}
最後に：シニアからのアドバイス
実務でコードを書く際、単に「動く」だけでなく、「なぜその指定なのか」を言語化できることは、エンジニアとしての武器になります。
特に`white-space`周りは、ブラウザのレンダリングエンジンによって微妙な解釈の違いが生まれることもある「地雷ポイント」です。今回紹介した設定は、現代のモダンブラウザにおいて最も安定しており、かつメンテナンス性の高い実装です。
もしチーム内で「このコードブロック、スマホで見ると崩れるよ」と指摘されたら、自信を持ってこのCSSを提案してみてください。「ああ、この人はブラウザの挙動を理解して実装しているな」という信頼感に繋がるはずです。
では、また次回の記事でお会いしましょう！良いコーディングライフを。
コメント