HTMLで改行するタグは <br> です。ソースコードの改行（改行コードのLF・CRLF）はブラウザでは空白1つとして扱われるため、Enterキーで改行しただけでは画面は改行されません。
HTMLで改行されない場合は、まず「何を改行したいのか」を分けて考えると原因を見つけやすいです。
文章の段落を分けたいなら p、文章の途中で強制的に改行したいなら br、入力された改行コードを反映したいならCSSの white-space を使います。
この記事では、HTMLで改行されない原因と直し方を、症状別に整理します。
- HTMLのソースコード上の改行が反映されない
brタグが効かない<br>がそのまま文字として表示されるpタグなのに改行されない- テキストの改行コードを反映したい
- HTMLメールで改行されない
tdの中で長い文字列が折り返されない
HTMLで改行されないときの早見表
まずは、症状ごとの原因と直し方を一覧で見ておきます。
| 症状 | よくある原因 | 直し方 |
|---|---|---|
| HTMLファイル内で改行しても画面で改行されない | HTMLでは連続する空白や改行がまとめて扱われる | p、br、pre、white-space を使う |
<br> がそのまま表示される |
HTMLとして解釈されず、文字としてエスケープされている | HTMLとして出力するか、エスケープ状態を確認する |
br が効かない |
HTMLとして出力されていない、またはCSSの表示方法が影響している | 実際のHTMLとCSSを確認する |
| 入力テキストの改行コードが反映されない | 改行コードは通常のHTML表示では折りたたまれる | white-space: pre-line; を使う |
| 長いURLや英数字が折り返されない | 単語の途中で改行できない | overflow-wrap: anywhere; を使う |
| HTMLメールで改行されない | メールクライアントごとにCSS対応が異なる | br、p、インラインCSSを使う |
HTMLのソースコード上の改行はそのまま表示されない
HTMLでは、ソースコードの中で改行しても、ブラウザ上ではその改行がそのまま反映されません。
たとえば、次のように書いても、画面では1つの文章として表示されます。
<p>1行目です。
2行目です。
3行目です。</p>HTMLでは、通常の文章内の空白や改行はまとめて扱われます。
そのため、画面上でも改行したい場合は、目的に応じたタグやCSSを使います。
段落を分けるならpタグを使う
文章のまとまりを分けたい場合は、p タグを使います。
<p>1つ目の段落です。</p>
<p>2つ目の段落です。</p>p は段落を表すタグです。
「文章A」と「文章B」を別の段落として見せたい場合は、br をたくさん入れるより p で分ける方が自然です。
余白を調整したい場合は、CSSで margin を指定します。
p {
margin: 1.5em 0;
line-height: 1.8;
}p は改行や余白のためだけのタグではなく、文章の段落を表すタグです。
文章の途中で改行したいならbrタグを使う
文章の途中で強制的に改行したい場合は、br タグを使います。
<p>
〒000-0000<br>
東京都〇〇区〇〇 1-2-3<br>
サンプルビル 5F
</p>br は終了タグのない空要素で、<br> と <br /> はどちらも同じ改行として扱われます。
住所、詩、歌詞のように、文章の途中で意味のある改行を入れたい場合には br が向いています。項目を1行ずつ並べたいだけなら、br で区切るよりul・ol・dlのリストにした方が構造として正しく、CSSでも扱いやすいです。
一方、段落間の余白を作るために br を何個も入れるのは避けた方がよいです。
余白はCSSで調整します。
.text-block {
margin-bottom: 24px;
}改行コードをそのまま反映したいならwhite-spaceを使う
フォームの textarea やデータベースから取得した文章に改行コードが入っていて、それを画面に反映したい場合があります。
その場合は、改行コードを br に置き換えなくても、CSSの white-space を指定するだけで改行を表示できます。フォーム側の作り方はHTMLフォームの作り方で解説しています。
<p class="message">1行目です。
2行目です。
3行目です。</p>.message {
white-space: pre-line;
}white-space: pre-line; を指定すると、テキスト内の改行は反映しつつ、通常の文章のように折り返しもされます。
ユーザーが入力した文章を表示する場合によく使います。
空白もそのまま表示したい場合
スペースやインデントもある程度そのまま表示したい場合は、white-space: pre-wrap; を使います。
.message {
white-space: pre-wrap;
}pre-wrap は改行や空白を保持しつつ、必要に応じて折り返します。
コードや入力内容の確認画面などで使うことがあります。
preタグは空白や改行をそのまま表示したいときに使う
pre タグは、整形済みテキストを表示するためのタグです。
空白、インデント、改行をそのまま表示したい場合に使います。
<pre>
1行目です。
インデントされた行です。
3行目です。
</pre>ただし、通常の本文を表示するだけなら p や white-space の方が扱いやすいです。
pre は、コード、ログ、整形済みテキストの表示に向いています。
brタグがそのまま表示される原因
<br> が改行にならず、そのまま文字として表示される場合は、HTMLとして解釈されていない可能性があります。
たとえば、次のようにエスケープされた状態で出力されていると、ブラウザはタグではなく文字として表示します。
<br>画面では次のように見えます。
<br>CMS、JavaScript、テンプレートエンジンなどで、HTMLが安全のためにエスケープされている場合によく起こります。
JavaScriptでtextContentに入れている場合
JavaScriptで textContent に <br> を入れると、HTMLではなく文字として表示されます。
const message = document.querySelector('.message');
message.textContent = '1行目<br>2行目';この場合、<br> はそのまま表示されます。
HTMLとして解釈させたい場合は innerHTML を使う方法もあります。
const message = document.querySelector('.message');
message.innerHTML = '1行目<br>2行目';ただし、ユーザー入力をそのまま innerHTML に入れるのは危険です。
ユーザー入力の改行を反映したいだけなら、HTMLタグを混ぜるより white-space: pre-line; を使う方が安全に扱いやすいです。
brタグが効かない場合に確認すること
br タグが効かないように見える場合は、次の点を確認します。
<br>が<br>のようにエスケープされていないか- 実際にブラウザの検証ツールで
brタグとして存在しているか - 親要素に特殊な
displayが指定されていないか - CSSで
brにdisplay: none;が指定されていないか - 改行ではなく余白を期待していないか
br は行を分けるタグですが、段落間の大きな余白を作るタグではありません。
余白がほしい場合は、margin や padding を使います。
pタグなのに改行されない場合
p タグは、通常はブロックのように表示されるため前後で改行されます。
それでも改行されない場合は、CSSで表示方法が変わっている可能性があります。
p {
display: inline;
}上のようなCSSが指定されていると、p がインラインのように表示されます。
通常の段落として表示したい場合は、display: block; に戻します。
p {
display: block;
}ただし、ブラウザの初期表示では p はブロックのように表示されるため、通常は明示しなくても問題ありません。
長いテキストが改行されない場合
長いURLや英数字の文字列は、途中で折り返せる場所が少ないため、枠からはみ出ることがあります。
この場合は、HTMLタグよりもCSSの折り返し設定を確認します。
.text {
overflow-wrap: anywhere;
}overflow-wrap: anywhere; を指定すると、長いURLや連続した英数字でも必要に応じて途中で折り返せます。
もし white-space: nowrap; が指定されている場合は、折り返しが抑制されます。
.text {
white-space: nowrap;
}改行させたい場合は、nowrap が不要か確認します。
tdで改行されない場合
table の td の中で長い文字列が改行されない場合もあります。
特に、URL、メールアドレス、商品コード、長い英数字などは折り返されにくいです。
基本的には、td に折り返しのCSSを指定します。
td {
overflow-wrap: anywhere;
}テーブル全体の幅を固定して折り返しやすくしたい場合は、table-layout: fixed; を使うこともあります。
table {
width: 100%;
table-layout: fixed;
}
td {
overflow-wrap: anywhere;
}詳しくは HTMLのtableでtdが改行されない原因とCSSで折り返す方法 で解説しています。
HTMLメールで改行されない場合
HTMLメールでは、ブラウザ向けのHTMLよりも注意が必要です。
メールクライアントによってCSSの対応が違うため、凝ったCSSに頼ると改行や余白が想定どおりにならないことがあります。
HTMLメールでは、次のようにシンプルに書く方が安定しやすいです。
<p>
こんにちは。<br>
お知らせの本文です。
</p>HTMLメールでは外部CSSが読まれないことが多いため、段落の余白は p タグに style="margin: 0 0 16px;" のようにインラインCSSで直接書きます。
また、余白は br を連続させるより、p や table のセル余白で調整する方が管理しやすいです。
まとめ
HTMLで改行されない場合は、原因によって直し方が変わります。
この記事のポイントをまとめると、次のようになります。
- HTMLのソースコード上の改行は、そのまま画面に反映されない
- 段落を分けたいなら
pを使う - 文章の途中で強制的に改行したいなら
brを使う - 入力テキストの改行コードを反映したいなら
white-space: pre-line;を使う - 空白やインデントも残したいなら
preやwhite-space: pre-wrap;を使う <br>がそのまま表示される場合は、HTMLとして解釈されているか確認する- 長いURLや英数字が折り返されない場合は
overflow-wrapを確認する - HTMLメールではシンプルなHTMLとインラインCSSを使う
改行はHTMLだけで解決する場合もあれば、CSSで解決する場合もあります。
「段落なのか」「強制改行なのか」「入力された改行コードを反映したいのか」を分けて考えると、適切な書き方を選びやすくなります。
関連記事
- HTMLタグの使い分け｜div・p・span・h1〜h3・asideを初心者向けに解説
- インライン要素とブロック要素の違い｜div・span・pの改行をCSSで制御する方法
- HTMLのtableでtdが改行されない原因とCSSで折り返す方法
- CSSで行の高さを調整するやり方
- CSSでテキストにスタイルを設定する方法