長い見出しやボタンの文字、スマホだと崩れちゃったりしますよね。
このページでは、今日から使えるやり方を順番に紹介します。
- ずっと1行にしたい →
white-space: nowrap（足りなければ「…」で省略） - ここで折り返してOKにしたい → HTMLの
<wbr>（改行候補） - 日本語をいい感じの塊で折り返したい →
inline-blockで文節を分ける - 長い英単語やURLで崩れる →
overflow-wrapを使う - 見出しの最終行が1語だけになるのがイヤ →
text-wrap: balance
ここから、やり方を
理由→コード→ポイント
の順でやさしく説明します。
1) ずっと1行にしたい（足りなければ「…」）
ラベルやタブ名など、「折り返さない前提」の文字に向いています。
<p class="one-line">とても長い見出しやテキスト……</p>.one-line {
white-space: nowrap; /* 折り返さない */
overflow: hidden; /* はみ出しは隠す */
text-overflow: ellipsis; /* 末尾に… */
}主要ブラウザ対応。ellipsisは幅の指定とoverflow: hiddenがそろっていないと効きません。
効かない環境でも「…が出ないだけ」で崩れません。
- 大事な単語が「…」で消えないよう、短い言い回しにするか、ツールチップなどで補いましょう。
- 「幅の指定」は
widthかmax-widthのどちらでも可、単一行指定（nowrap）とセットが必要
2) 「ここで折り返してOK」を入れる（<wbr>）
<wbr>は改行候補です。狭い幅では改行、広い幅ならそのまま繋がります。文章のリズムを崩しません。
<h2>日本語の<wbr>見出し改行を<wbr>きれいに制御する</h2><br>は「必ず改行」ですが、<wbr>は「折り返してもいい場所」。見出しやボタンに向いています。
3) 日本語は“文節”で区切ると自然（inline-block）
日本語は単語の境目が分かりにくいので、文節で小さな塊を作ると、自然なところで折り返してくれます。
<p class="chunks">
<span>最近</span><span>暖かいけど</span><span>何着れば</span><span>いいの</span>
</p>.chunks > span {
display:inline-block;
}
/* 文節ごとに小さな塊にする */やりすぎると管理が大変。2〜4塊くらいまでが目安です。
4) 長い英単語やURLの崩れを止める（overflow-wrap）
overflow-wrapは、どうしても入らないときだけ単語の途中で折り返します。普段はきれいなままです。
.long-url {
overflow-wrap: anywhere; /* 入らないときだけ途中で折り返す */
word-break: normal; /* いつもは単語を割らない */
line-break: strict; /* 日本語の句読点なども整える */
}<p class="long-url">
https://example.com/this-is-a-very-long-url-that-keeps-going
</p>モダンブラウザで対応。
古いSafari系ではoverflow-wrap: anywhereが弱いことがあるので、必要なら下のフォールバックを併記すると安心です。line-breakはブラウザによって効き方に差がありますが、無視されても悪化しません。
/* Safari系の一部で anywhere が弱い場合の保険（効かなければ無視されるだけ） */
.long-url {
overflow-wrap:anywhere;
word-break:normal;
}
@supports not (overflow-wrap:anywhere){
.long-url{ word-break:break-word; } /* 旧仕様相当 */
}word-break: break-allは常に文字を割るので、英語が読みにくくなります。最終手段に。
5) 見出しの最後が1語だけ…を避ける（text-wrap: balance）
見出しの行数バランスをブラウザが自動で調整してくれます。対応していない環境では何も起きない（悪化しない）ので安全。
h1, h2, h3 { text-wrap: balance; }新しめのブラウザで有効。未対応の環境では無視されるだけなので、入れておいて問題ありません（段落はprettyも同様）。
ブログの記事タイトルや見出しに広くおすすめ。段落にはtext-wrap: prettyも選べます（対応状況はブラウザ次第）。
6) 英語のハイフン表示をコントロールしたいとき（­ と hyphens）
英語の複合語など、きれいに区切りたい場所で「見えるハイフン」を出せます。
<!-- 6) hyphens の実例：自動 と 手動 を比較 -->
<div class="demo" style="max-width:220px;border:1px solid #ddd;padding:8px;line-height:1.7;">
<p class="hyphenated" lang="en">
multifunctionaldevicecharacteristics are extraordinarilycomplicatedtoday
</p>
<p class="hyphen-manual" lang="en">
multifunctionaldevicecharacteristics are extraordinarilycomplicatedtoday
</p>
</div>.hyphenated { hyphens:auto; overflow-wrap:normal; word-break:normal; }
.hyphen-manual { hyphens:manual; overflow-wrap:normal; word-break:normal; }多くのブラウザで対応しますが、言語辞書に依存します。
要素に lang="en" などを付けると安定します。hyphenate-character は対応が限られるため、効かない環境では無視されます。
（※「max-width:220pxは表示確認のため」）
hyphens: autoはブラウザや言語辞書に左右されるので、ここで切りたいが決まっているなら­が確実です。
まとめてコピペ（最小セット）
<!-- 1) 一行固定（省略記号） -->
<p class="one-line">とても長いテキスト……</p>
<!-- 2) 必要ならここで折り返してOK -->
<h2>日本語の<wbr>見出し改行を<wbr>きれいに制御する</h2>
<!-- 3) 日本語は文節で -->
<p class="chunks">
<span>最近</span><span>暖かいけど</span><span>何着れば</span><span>いいの</span>
</p>
<!-- 4) 長いURLや英単語 -->
<p class="long-url">https://example.com/this-is-a-very-long-url-that-keeps-going</p>/* 一行固定＋… */
.one-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 見出しのバランス（対応ブラウザで効く） */
h1,h2,h3 { text-wrap: balance; }
/* 日本語を文節ごとに */
.chunks > span { display:inline-block; }
/* 長い英単語/URLの崩れ防止 */
.long-url {
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}よくある質問
<br>と<wbr>は何が違う？-
<br>は必ず改行します。<wbr>は改行してもいい場所を示すだけ。入る幅があれば改行しません。 - タイトルの最後が1語だけで不格好です。
-
見出しに
text-wrap: balanceを指定してください。対応ブラウザでは行のバランスが整います。非対応でも表示は悪くなりません。 - 英語やURLでレイアウトが壊れます。
-
overflow-wrapを使いましょう。どうしても入らないときだけ途中で折り返します。break-allは最後の手段です。
最後に仕上げチェック
- 見出しやボタンに
<wbr>を1〜2か所 - 本文エリアに
.long-urlを用意 - 見出し全体へ
text-wrap: balance - どうしても1行にしたい所だけ
.one-line
