改行まわりの CSS 入門｜white-space・word-break・overflow-wrap・日本語の line-break
Markdown を HTML にした後の折り返しCSS入門。white-space・overflow-wrap・word-break・日本語向けline-breakの違い、コードブロックのパターン、印刷・PDF 確認のポイントまで整理します。
この記事でわかること
- 改行と折り返しを司る主な CSS プロパティ（
white-space・overflow-wrap・word-break・line-break） - 英数字の長い文字列 と 日本語・混在文 で挙動が変わる理由のざっくりした整理
- コードブロック（
pre/code） と インラインコード でよくある設定 - Markdown → HTML → PDF の流れで、印刷やプレビューに影響するポイント
Markdown は「ソースを書く」ことに集中しやすい一方、ブラウザに描画したときの行の切れ方は CSS の仕様と組み合わせで決まります。本記事はドキュメント系・技術文書を想定した入門です。
まず押さえる「改行」と「折り返し」
- ソース上の改行 … Markdown 内の
\nが、HTML では<p>の区切りや<br>に変換される（変換ルールは Markdown 実装に依存）。 - 表示上の折り返し … ブラウザが行ボックスの幅に合わせて、1 行に収まらない文字列を次の行に送る挙動。ここでは主に CSS の折り返しを扱います。
ユーザーが見る「見栄え」は、後者の 折り返し と 禁則処理（日本語）の組み合わせで大きく変わります。関連して Markdown PDF の見栄えを上げる も参照してください。
white-space — ソースの空白・改行をどう扱うか
代表的な値だけ押さえます。
| 値 | ざっくりした挙動 |
|---|---|
normal（既定） | 連続空白は畳み、必要なら折り返し |
nowrap | 折り返さない（横スクロールやコンテナからはみ出しやすい） |
pre | ソースの空白・改行をそのまま（等幅フォントと組み合わせることが多い） |
pre-wrap | pre に近いが、行末では折り返しも可 |
pre-line | 改行は保持、連続空白は畳む |
コードブロックは pre / pre-wrap 系のスタイルがよく当たります。pre だけだと長い行がはみ出すことがあるため、実装によっては pre-wrap や後述の overflow-x と組み合わせます。
overflow-wrap（旧 word-wrap）— 単語の途中でも折るか
normal… 単語の境界で折り返すのが基本（言語・ブラウザの禁則処理と連動）。break-word… 必要なら単語の途中でも折り返してはみ出しを防ぐ。
長い URL や長い英単語が段落内に入っているとき、break-word が効くと「右端からはみ出す」事故が減ります。
一般的なユーティリティ名（Tailwind など）では break-words が overflow-wrap: break-word に相当することが多いです（プロジェクトの定義に合わせてください）。
word-break — 主に CJK・英混在の「どこで切るか」
よく使う値のイメージです。
| 値 | ざっくりした挙動 |
|---|---|
normal | 既定の折り返しルール |
break-all | 任意の文字の間で折り返し可能（日本語でも単語の途中のように切れる） |
keep-all | 中国語・韓国語など単語間の折り返しを優先（日本語ではブラウザ依存の挙動に注意） |
日本語の本文で break-all を当てすぎると、読みやすさを損なうことがあります。長い英数字の連続だけを別スタイルで包む、などに分けると安全です。
line-break — 日本語の禁則に近い調整
line-break は strict / loose などで、行頭行末に来てほしくない文字の扱いを調整します（ブラウザ実装の差はあります）。
日本語の仕様書・PDF 向けでは、本文と表、コードブロックで同じルールを当てない（表は break-all、本文は normal など）ほうが、レイアウトの破綻が少ないことがあります。
hyphens — 欧文のハイフネーション
hyphens: auto は言語タグ（lang="en" など）とフォントのサポートに依存します。日本語メインのドキュメントでは、欧文の折り返しに過度に期待しないほうが安全です。
コードブロックでよくあるパターン
| 課題 | 考え方の例 |
|---|---|
| 長い行が横に伸びる | pre に overflow-x: auto でスクロール、または white-space: pre-wrap で折り返し |
| フォントが読みにくい | font-family を等幅（ui-monospace など）に統一 |
| 印刷で途切れる | 印刷プレビューで確認。必要なら行を手で折る・ログを短くするなどソース側も検討 |
Markdown のフェンス付きコードは、HTML では <pre><code> に変換されることが多く、コンポーネント側の CSS がそのまま見栄えを決めます。
表・画像まわり
表セルは table-layout や width とセットで、word-break の影響が出やすいです。列が多いと 1 セルに break-all が必要になることもあります。
画像は max-width: 100% などで枠からはみ出さないのが基本です（改行は本文側の問題ではなく、ブロックの幅の問題になりやすいです）。
Markdown → HTML → PDF での確認のしかた
- ブラウザの開発者ツールで、該当要素に
white-space/overflow-wrap/word-breakがどう当たっているかを見る。 - 印刷プレビュー（PDF 保存を含む）で、改ページと合わせて横方向のはみ出しを確認する。
- 日本語・英混在・URL・コードが混ざる実データで試す（短いダミー文だと分かりにくい）。
本サイトの Markdown を PDF に では、印刷レイアウトを前提にした調整がしやすい UI を想定しています。
よくある質問（FAQ）
Q. word-break: break-all を全体に適用していい？
本文には向かないことが多いです。長い英数字のブロックだけに限定する、などにしてください。
Q. br と CSS の折り返しはどう使い分ける？
意味のある改行（詩・住所など）は br か段落分け。幅に応じた折り返しは CSS に任せる、が基本です。
まとめ
- 改行と折り返しは、
white-space・overflow-wrap・word-break・line-breakが主役 - 日本語・英混在・URL・コードでは、同じルールを当てないほうが安全なことが多い
- 印刷・PDF では、画面の幅と用紙の幅が違うため、最終確認は印刷プレビューが確実