HTML 改行の方法｜brとpの違い・改行されない原因をChromiumで実測

改行の種類が3つあることを押さえると、つまずきのほとんどは整理できます。

flowchart TD
    Q[改行したい] --> A{段落が変わる?}
    A -->|はい| P[p で分ける]
    A -->|いいえ| B{改行文字が<br>ある?}
    B -->|はい| W[white-space:<br>pre-wrap]
    B -->|いいえ| R[br で改行]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS の上で、Playwright 1.63.0（Node.js 22.23.4）から Chromium 153.0.8010.12 をヘッドレスで起動し、幅 400px・Noto Sans CJK JP 16px・行の高さ 24px の枠に同じ文を 45 通りの書き方で入れて描画しました。高さは clientHeight、はみ出しは scrollWidth、行数は1文字ずつの位置で数え、innerText・textContent も記録しました。表示幅 1000px と 390px の2つで確かめ、スクリーンショットも目で見ています。br・white-space・word-break・overflow-wrap の仕様は MDN、WordPress の自動整形は wpautop の公式リファレンスで確かめました。図は mermaid 11.16.0 で描画を確かめています（確認日 2026年10月29日）。

HTML 改行の基本：ソースの改行はブラウザで無視される

この節では、HTML ファイルの中で Enter を押しても画面が改行されない理由と、Chromium が実際に何を表示したかが分かります。

HTML では、ソースの改行・タブ・連続した半角スペースは、まとめて半角スペース1つとして扱われます。 これは CSS の white-space の既定値 normal の動きで、MDN の表では「改行文字：統合する」「空白とタブ文字：統合する」と書かれています。改行したい場所には、改行を表すタグ（br・p）か、改行文字を保つ CSS が要ります。

<p>ご注文ありがとうございます。
明日発送します。</p>

この HTML を Chromium で描画した結果です。ソースでは2行ですが、画面では1行になり、2つの文の間に半角スペースが1つ入りました。

textContent には改行文字 \n が残っていますが、innerText では半角スペースになっていました。データとしての改行文字は残り、描画のときに潰されている、というのが正確な理解です。日本語の文の間に半角スペースが見えるのを避けたいときは、ソースを1行で書くか、タグの直後で改行します。innerText と textContent の違いは、関連記事「innerHTMLとtextContentの違い｜innerText比較表」で扱っています。

brタグの使い方と書き方（<br>・<br/>・</br>の違い）

この節では、br タグの正しい書き方と、閉じタグを書いたときに Chromium がどう扱ったかが分かります。

<br> は、置いた場所で行を変える要素です。 MDN は、詩や住所など行の分割が重要な場合に有用、と説明しています。中身を持たない要素（void 要素）なので閉じタグはありません。

<p>株式会社RJC<br>
東京都千代田区<br>
経営戦略推進室</p>

書き方の違いを Chromium に入れた結果です。

<br></br> と書くと br が2つに増え、意図しない空行が入りました。 ブラウザは </br> を <br> の書き間違いとして扱うためです。閉じタグは書かず、<br> か <br /> のどちらかに揃えます。

br は行の高さだけを持ちます。br に margin を付けて行間を広げる方法は、MDN が良いやり方ではないとして、line-height を案内しています。

pタグとbrタグの違い（段落と行・高さの実測）

この節では、p と br のどちらを使うかの基準と、見た目の違いが数字で分かります。

p は「段落（話のまとまり）」、br は「段落の中の行」です。 見た目の違いは余白にあります。同じ2文を3通りで書き、高さを測りました。

A は br、B は p を2つ、C は br を2つ（空行のつもり）です。

<p>ご注文ありがとうございます。<br>明日発送します。</p>

<p>ご注文ありがとうございます。</p>
<p>明日発送します。</p>

<p>ご注文ありがとうございます。<br><br>明日発送します。</p>

• p と p の間の余白（既定 1em = 16px）は、行1つ分（24px）より小さく、空行とは別物です。 br を2つ並べると行1つ分が空き、p の余白より広くなります。余白の大きさは CSS の margin で変えられます。
• innerText は p の区切りを \n\n、br を \n として返しました。コピーした文字列も同じ形になります。

preタグとwhite-space（pre・pre-wrap・pre-line・nowrap）の描画比較

この節では、改行文字をそのまま表示する方法と、それぞれの値で折り返し・スペースがどう変わるかが実測で分かります。

改行文字（\n）とスペースを保ったまま表示するには、pre 要素か、CSS の white-space を使います。 迷ったら pre-wrap です。同じ内容（文の間に改行1つとスペース4つ）を入れた結果です。

<pre>ご注文ありがとうございます。
明日発送します。</pre>

<p style="white-space: pre-wrap;">ご注文ありがとうございます。
    明日発送します。</p>

• pre と white-space: pre は折り返しません。 長い行は枠からはみ出し、スマホでは横スクロールになります。文章に使うなら pre-wrap です。
• pre 要素は既定で等幅フォントになります（幅の差 14px はフォントの違い）。コードには pre、文章には p＋pre-wrap が向いています。
• pre-line は「改行は保つが、連続スペースは1つにまとめる」値です。ソースの字下げを見せたくないときに使えます。
• MDN によると、white-space は white-space-collapse（空白の扱い）と text-wrap-mode（折り返し）の一括指定で、pre-wrap は preserve wrap と同じです。

連続スペース・空行を入れる方法（&nbsp;・br・margin）

この節では、文字の間を空けたい・行の間に空白を入れたいときの選び方が分かります。

連続した半角スペースは1つに潰されるため、見た目の空白は CSS で作るのが基本です。 手元で   を4つ入れたときだけ、4つ分の空白が残りました（高さは 24px のまま）。

  は「改行しないスペース」で、「10 kg」のように数字と単位を切り離したくない場面のものです。

HTMLが改行されない原因6つと直し方

この節では、「改行したはずなのに1行になる」ときに確かめる6つの原因と直し方が分かります。

原因のほとんどは「改行文字はあるが、ブラウザが改行として描画していない」ことです。

原因3・4の実測です。

WordPress の場合

WordPress の投稿本文は wpautop 関数が整形します。公式リファレンスによると、空行（改行2つ）を p に置き換え、残った改行は <br /> に変換します（$br が false なら変換しない）。テーマやプラグインがこの関数を外していると、エディターの改行が反映されません。

長いURL・英単語が改行されない：word-breakとoverflow-wrap

この節では、長い URL や英数字の並びが枠からはみ出す理由と、どの CSS を付ければ収まるかが実測で分かります。

日本語は文字ごとに折り返せますが、英数字の並びは「単語の切れ目」でしか折り返しません。 60 文字のトークンを含む URL を幅 400px の p に入れると、枠を 299px はみ出しました。

/* 推奨：単語の途中で折る必要があるときだけ折る */
p { overflow-wrap: anywhere; }

/* 英数字も文字単位で折る（URL の表示や表のセル向け） */
.cell { word-break: break-all; }

• overflow-wrap: anywhere は「収まらないときだけ」単語の途中で折るので、ふつうの文章の折り返しは変わりません。本文の既定にしておくと、URL がはみ出す事故を防げます。
• word-break: break-all は、収まる・収まらないに関係なく、英数字をどの文字の間でも折ります（MDN は CJK 以外のテキストの禁則を解除する値と説明しています）。手元では URL が1行目から詰められ、折れる位置が全体に変わりました。表のセルや URL だけの欄に限って使います。日本語はもともと文字の間で折り返せるため（指定なしでも「お届け｜まで」で折れました）、日本語のために break-all を付ける必要は普通ありません。
• anywhere と break-word の違いは、最小幅（min-content）の計算に折り返しを含めるかどうかです。flex・grid の中で幅が縮まらないときは anywhere を使います。
• Chromium は URL の ? の直後では折り返しました（?token= の形の 40 文字は指定なしでも収まりました）。折れる位置はブラウザの規則に依存するため、CSS で保険を掛けておきます。

word-break と overflow-wrap の値ごとの違いは、関連記事「CSS折り返し早見表｜word-breakとoverflow-wrapの違い」で扱っています。

JavaScript・textareaの改行文字（\n）を改行として表示する

この節では、JavaScript の文字列やフォームの入力に含まれる改行文字を、画面で改行として出す3つの方法が分かります。

最も安全なのは、文字列はそのまま textContent に入れ、表示側の CSS を white-space: pre-wrap にする方法です。 HTML として解釈させないので、入力に <script> が混ざっていても文字として表示されます。

const v = textarea.value;              // "ご注文ありがとうございます。\n明日発送します。"

// 方法1（推奨）：文字として入れ、CSS で改行を保つ
out1.textContent = v;                  // out1 { white-space: pre-wrap; }

// 方法2：エスケープしてから \n を <br> に置換する
const esc = s => s.replace(/[&<>"']/g, c =>
  ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
out2.innerHTML = esc(v).replace(/\r?\n/g, '<br>');

// 方法3：行ごとに要素を作る（React なら split('\n').map(...)）
v.split(/\r?\n/).forEach(line => {
  const p = document.createElement('p');
  p.textContent = line;
  out3.appendChild(p);
});

方法1と2の実行結果は、どちらも 48px・2行でした（前の節の表）。方法2は先にエスケープしてから置換する順番を守ります。逆にすると、置換で入れた <br> まで文字として表示されます。

1. 1表示するだけ → textContent ＋ pre-wrapエスケープ不要で、改行とスペースがそのまま出る
2. 2行ごとに装飾したい → split して要素を作る1行目だけ太字、など
3. 3HTML として組み立てたい → エスケープ → br に置換 → innerHTML順番を逆にしない。テンプレートエンジンなら nl2br 相当の関数を使う

Windows の改行コードは \r\n なので、置換の正規表現は /\r?\n/ にしておくと両方に効きます。innerHTML に外部の文字列を入れる危険については、関連記事「dangerouslySetInnerHTMLの使い方とサニタイズ」の内容と同じ考え方です。

改行させない方法（nowrap・wbr）とスマホだけ改行するbr

この節では、折り返しを止める方法、wbr、画面幅で br を切り替える書き方が分かります。

折り返しを止めるのは white-space: nowrap、「ここでなら折ってよい」と伝えるのは <wbr> です。 Chromium での結果です。

スマホだけ改行する br

見出しやキャッチコピーで「PC は1行、スマホは2行」にしたいときは、br に class を付けて display を切り替えます。

<p>ご注文ありがとうございます。<br class="sp">明日発送します。</p>

<style>
.sp { display: none; }                         /* PC では改行しない */
@media (max-width: 480px) { .sp { display: inline; } }  /* スマホでは改行する */
</style>

表示幅 1000px では 24px・1行、390px では 48px・2行になりました。br は display: none にすると改行しなくなります。 逆に「PC だけ改行」は .pc { display: none; } をスマホ側のメディアクエリに書きます。

display・flex・tableの中でのbrの挙動（実測）

この節では、レイアウト用の CSS と br の組み合わせを確かめた結果が分かります。

手元の Chromium 153 では、flex・grid・table のどの中でも br は改行として働きました。 改行されないように見えるときは、br ではなく要素の display が原因のことが多いです。

• span・a・strong などのインライン要素は、並べても改行しません。 縦に積みたいときは display: block にするか、p・li などのブロック要素に変えます。display の違いは、関連記事「CSS displayの種類一覧｜block・inline・noneの違い」で扱っています。

brとpの使い分け判断表

この節では、場面ごとにどの改行の方法を選ぶかが一覧で分かります。

改行とアクセシビリティ（スクリーンリーダー・意味づけ）

この節では、br の使い方が読み上げソフトや検索エンジンにどう影響するかが分かります。

見た目のために br を重ねると、読み上げソフトを使う人には「何も無い行」が伝わります。 MDN は、段落の間隔を広げるために連続した br を使うと、スクリーンリーダーが要素の存在をアナウンスするのに中身が無い状態になり、使う人を混乱させる可能性がある、と説明しています。

• 1段落は p で分ける読み上げソフトは段落単位で移動できる。br の連打では段落として認識されない
• 2一覧は ul・ol にする「項目 3 件」のように件数が伝わる。br で並べた行は1つの段落として読まれる
• 3間隔は margin・line-height で付けるMDN は br への margin を良いやり方ではないとし、line-height を案内している
• 4見出しの途中の br は最小限にする検索結果やリンクの文字列には改行が出ない。文として読める位置で折る
• 5スマホ用の br は display で切り替えるbr を消すなら display: none。手元で 1000px は1行、390px は2行になった

p・ul・h2 で構造が付いた文書のほうが、内容のまとまりを機械が読み取りやすくなります。タグの意味は、関連記事「HTMLタグ一覧表｜基本タグから全要素まで表示例・コピペ用コード付き」で扱っています。

よくあるエラー・つまずき（原文つき）

この節では、改行まわりで実際に目にする症状と、原因・直し方が一覧で分かります。

よくある質問

Q. HTML で改行するにはどうすればよいですか？ A. 文の途中で行を変えるなら <br>、話のまとまりを分けるなら <p> で囲みます。HTML ファイルの中で Enter を押しただけでは、半角スペース1つになり改行されません。

Q. br タグと p タグの違いは何ですか？ A. br は「段落の中の改行」、p は「段落そのもの」です。手元の実測では、br は 24px × 2 行、p を2つ並べると既定の余白が付いて 64px（24 + 16 + 24）になりました。p の余白は CSS の margin で自由に変えられます。

Q. <br> と <br /> はどちらが正しいですか？ A. HTML ではどちらも同じ1つの br として描画されました（48px・2行）。<br /> は XHTML の書き方で、HTML でもそのまま動きます。<br></br> と書くと br が2つになり空行が入るので避けます。

Q. HTML が改行されないのはなぜですか？ A. 多いのは、ソースの改行だけで改行したつもりになっている、CSS の white-space: nowrap が効いている、textarea や JavaScript の \n をそのまま p に入れている、の3つです。本文の「HTMLが改行されない原因6つ」の順に確かめます。

Q. 改行をそのまま表示するにはどうすればよいですか？ A. 表示する要素に white-space: pre-wrap を付けます。改行とスペースを保ったまま、枠の幅で折り返します。pre 要素や white-space: pre は折り返さないので、長い行は枠からはみ出します（実測 651px・637px）。

Q. スマホだけ改行するにはどうすればよいですか？ A. <br class="sp"> と書き、CSS で .sp { display: none; }、メディアクエリの中で .sp { display: inline; } にします。手元では表示幅 1000px で1行、390px で2行になりました。

Q. 長い URL が改行されずにはみ出します。 A. overflow-wrap: anywhere を付けます。収まらないときだけ途中で折るので、文章の見た目は変わりません。

Q. JavaScript の \n を改行として表示するには？ A. 表示先に white-space: pre-wrap を付け、文字列は textContent で入れるのが最も安全です。innerHTML に入れるなら、HTML エスケープをしてから \n を <br> に置換します。順番を逆にすると br が文字として表示されます。

まとめ

• HTML のソースの改行・連続スペースは、描画のときに半角スペース1つに潰される。Chromium では日本語の文の間にも半角スペースが入った（24px・1行）。
• 文中の改行は <br>（48px・2行）、段落は <p>（既定の余白つきで 64px）。空行を作るために br を重ねない。<br></br> は br 2つになる。
• データに入っている改行文字をそのまま出すなら white-space: pre-wrap。pre と white-space: pre は折り返さず、長い行は枠からはみ出す。
• 長い URL・英数字は overflow-wrap: anywhere で収まる。word-break: break-all は収まるときでも英数字を文字単位で折るので、表のセルなどに限る。
• 改行されない原因は、ソースの改行・nowrap・textarea の値・JS の \n・テンプレートのエスケープ・HTML メールの6つ。開発者ツールで white-space と innerText を見ると、どれかが分かる。

次に読むとよい記事です。折り返しの CSS は関連記事「CSS折り返し早見表｜word-breakとoverflow-wrapの違い」、行の高さや揃え方は関連記事「CSS text-alignとline-heightの使い方｜効かない原因も」で扱っています。

参考・出典

確認日はいずれも 2026年10月29日です。

• MDN「<br>: 改行要素」：https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/br
• MDN「white-space」：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/white-space
• MDN「overflow-wrap」：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/overflow-wrap
• MDN「word-break」：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/word-break
• MDN「<wbr>: 改行可能要素」：https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/wbr
• WordPress Developer Resources「wpautop()」：https://developer.wordpress.org/reference/functions/wpautop/

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。