HTML・CSSで文字の改行や折り返しを調整する方法

デスクトップパソコン商用無料イラスト Web制作

幅が変わる要素で起きる不自然な改行

ナビゲーションやカードのように幅が制限された要素では、横幅が変わることで文字が意図しない位置で折り返されます。ひとまとまりで見せたい語句が、オンラインサとポートのように分割されます。逆に改行を禁止すれば、テキストが要素からはみ出します。

意味の切れ目で改行させるための手段は、ひとつに限りません。単独で足りる場合もあれば、複数を組み合わせて狙った位置に落ち着かせる場合もあります。組み合わせの中身を決めるには、まず改行の種類を分けて捉えます。

ひとつは強制改行で、HTMLの<br>などによって明示的に次の行へ送ります。もうひとつは自動折り返しで、横幅が足りなくなったときにブラウザが改行できる位置を判断して次の行へ送ります。CSS仕様では、この自動的な折り返し位置をsoft wrap opportunityとして扱います。指定した位置で必ず改行させたいのか、幅が足りないときだけ改行させたいのか。この区別が、<br>、<wbr>、word-break、white-spaceそれぞれの役割を分けます。

指定位置で必ず改行するbrと候補を足すwbr

<br>は横幅に余裕があっても、必ずその位置で改行します。

<span>
  営業時間<br>
  9:00〜18:00
</span>

MDNは<br>を、詩や住所のように行の区切り自体が内容の一部である場合に使う要素と説明しています。段落間に余白を作る目的では使わず、段落を<p>で囲んでCSSのmarginで調整します。

幅が足りないときだけ改行させたい場合に使うのが<wbr>です。word break opportunityを表すHTML要素で、ブラウザの改行規則ではそこで改行しない位置に、折り返しの候補を追加します。

<span>
  オンライン<wbr>サポート
</span>

横幅が十分ならオンラインサポートのまま一行で表示され、足りなくなればオンラインとサポートの間で折り返されます。要素自体は画面に空白も記号も表示しません。UTF-8のページではU+200BのZERO WIDTH SPACEと同じように振る舞い、そこで折り返された場合もハイフンは出ません。

二つの役割は次のように分かれます。

  • <br>は必ずその位置で改行する
  • <wbr>は必要な場合だけ、その位置を折り返し候補にする

<wbr>はMDNでBaseline Widely availableとされ、2015年7月から主要ブラウザで利用できます。

日本語でwbrとkeep-allを組み合わせる理由

日本語では、<wbr>を入れてもその位置でしか折り返さないという意味にはなりません。日本語は多くの文字間にもともと折り返し候補があるため、要素がさらに狭くなればオンラインサとポートのように別の位置で折り返されます。<wbr>は候補を追加する要素であり、既存の候補を禁止する要素ではありません。

そこで既存の候補を減らす側の指定を足します。word-breakのkeep-allです。MDNの説明では、この値は中国語、日本語、韓国語のテキストで単語の分割を行わず、CJK以外のテキストはnormalと同じ挙動になります。

.label {
  word-break: keep-all;
}

keep-allだけでは、必要な折り返しまで行われにくくなります。候補を減らす指定と、候補を足す要素。この二つがそろうことで、指定した位置での折り返しになります。

<span class="label">
  オンライン<wbr>サポート
</span>
.label {
  word-break: keep-all;
}

通常時はオンラインサポート、幅が不足したときだけオンラインとサポートの二行になります。

この組み合わせは仕様にも書かれています。CSS Text Module Level 4は、見出しや図表のキャプションのようなごく短いテキストで折り返し位置を限定する手順として、<wbr>またはU+200Bで許可する位置を記し、それ以外をword-breakのkeep-allで抑える方法を示しています。

<span class="label">
  会員登録<wbr>はこちら
</span>
.label {
  word-break: keep-all;
}

普段は一行で表示され、狭くなった場合だけ意味の切れ目で折り返されます。

brを加えて三つを重ねる

通常時から決まった位置で改行しつつ、さらに狭くなった場合の逃げ道も作れます。<br>と<wbr>とkeep-allを同時に使う形です。

<span class="label">
  オンライン<wbr>相談<br>
  受付中
</span>
.label {
  word-break: keep-all;
}

通常時はオンライン相談と受付中の二行になり、幅が足りなくなればオンラインと相談の間でも折り返されます。<br>が通常時から必ず改行する役割、<wbr>が必要になった場合だけ追加で折り返せる役割を持ちます。

white-spaceで折り返しと改行を扱う

要素全体に指定するのではなく、特定の語句だけ途中で分割させたくない場合があります。その語句にwhite-spaceのnowrapを指定します。

<p>
  詳細は<span class="no-wrap">サポート窓口</span>までお問い合わせください。
</p>
.no-wrap {
  white-space: nowrap;
}

要素全体に指定すれば、自動折り返しそのものを禁止できます。禁止されるのは自動的な折り返しだけで、<br>による強制改行は残ります。<wbr>もsoft wrapの候補である以上、nowrapを指定した要素の中では基本的に働きません。できれば一行、収まらなければ意味の切れ目で二行という動作を狙うなら、keep-allと<wbr>を使います。

入力データの改行を表示へ反映する

CMSなどから受け取った文字列の改行コードは、通常のHTMLでは画面上の改行になりません。pre-lineを指定すると、ソース内の改行が表示上の改行として扱われ、通常の自動折り返しも行われ、連続した空白はまとめられます。

.text {
  white-space: pre-line;
}

空白もそのまま保持したい場合はpre-wrapを使用します。どちらも<wbr>とは用途が別で、テキストデータに既に含まれている改行をどう扱うかを決める指定です。

はみ出す文字列と欧文の折り返し

URLや連続した英数字は通常の折り返し位置を持たないため、要素からはみ出します。ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789のような文字列です。この場合に使うのがoverflow-wrapのanywhereです。

.text {
  overflow-wrap: anywhere;
}

anywhereは、ほかに使える折り返し位置がなく、そのままではオーバーフローする場合に限り、任意の位置で分割します。分割位置にハイフンは入りません。長いURL、メールアドレス、ファイル名、商品コード、ハッシュ値、長い英単語や英数字が主な対象です。

word-breakのbreak-allとbreak-word

word-breakのbreak-allもあります。MDNの説明では、こちらはCJK以外のテキストについて、単語をまるごと次の行へ送れば収まる場合でも、はみ出す直前の位置で分割します。overflow-wrapが単語全体を次の行へ送れないときにだけ働くのに対して、より強い指定です。

word-breakのbreak-wordは非推奨です。MDNは、指定された場合はoverflow-wrapの実際の値にかかわらず、word-breakのnormalとoverflow-wrapのanywhereを組み合わせたのと同じ効果になる、と説明しています。

欧文をハイフン付きで折り返す

欧文で長い単語をハイフン付きで分割したい場合はhyphensを使います。

<p lang="en" class="text">
  An extraordinarily long sentence.
</p>
.text {
  hyphens: auto;
}

autoを指定すると、ブラウザがその言語のハイフネーション規則で位置を判断します。適切なlang属性と、ブラウザ側の該当言語用ハイフネーション辞書が必要なため、ブラウザや言語によって結果が変わります。手動で候補を示す場合は&shy;を挿入します。<wbr>が折り返してもハイフンを出さないのに対して、&shy;はその位置で折り返したときにハイフンを表示します。

句読点と記号の禁則を扱うline-break

日本語には句読点、括弧、小書き文字、繰り返し記号などを行頭や行末にどこまで許容するかという組版規則があります。その部分を扱うのがline-breakです。

.text {
  line-break: strict;
}

値はauto、loose、normal、strict、anywhereの五つ。

  • looseは比較的緩い規則
  • normalは一般的な規則
  • strictはより厳格な規則
  • anywhereはほぼすべての文字境界を折り返し候補とする強い指定

語句を途中で分断させるかどうかはword-break、句読点や記号の周辺をどう扱うかはline-break。役割の境目はここにあります。日本語として処理させる文章には、HTML側でも言語を指定します。

<p lang="ja" class="text">
  日本語の文章が入ります。
</p>

line-breakはMDNで2020年7月以降Baseline Widely availableとされ、現在の主要ブラウザで広く対応しています。

行の分かれ方を整えるtext-wrap

折り返し位置そのものに問題がなくても、二行になったときに一方の行だけ極端に短くなることがあります。text-wrapのbalanceは、ブラウザが使える折り返し候補の中から、各行の文字数の偏りが小さくなる組み合わせを選びます。

.heading {
  text-wrap: balance;
}

新しい折り返し候補を作る機能ではありません。既にある候補から選ぶ指定であるため、<wbr>やkeep-allと併用できます。

<h2 class="heading">
  新商品<wbr>ラインナップを<wbr>公開しました
</h2>
.heading {
  word-break: keep-all;
  text-wrap: balance;
}

文字数を数えて複数行に振り分ける処理は計算量が大きく、対象はChromiumでは六行以下、Firefoxでは十行以下のテキストブロックに限られます。MDNが用途として挙げているのは、見出し、キャプション、引用のような行数の少ないテキストです。2026年8月時点の対応はChromeとEdgeが114以降、Firefoxが121以降、SafariとiOS Safariが17.5以降です。

本文向けのpretty

長めの本文にはprettyがあります。通常の折り返しより計算量の多いアルゴリズムを使い、速度より組版品質を優先する値です。MDNは、短すぎる最終行を減らしたい本文向けと説明しています。2026年8月時点の対応はChromeとEdgeが117以降、Safariが26以降で、Firefoxは未対応です。未対応のブラウザでは宣言が無視され、通常の折り返しが行われます。

ブラウザに文節を判定させるauto-phrase

折り返し位置を手作業で指定する代わりに、ブラウザへ任せる値もあります。word-breakのauto-phraseです。言語固有の解析を行い、自然なフレーズの途中に折り返しを入れにくくします。

<p lang="ja" class="heading">
  明日から新しい受付サービスを開始します
</p>
.heading {
  word-break: auto-phrase;
}

Chromeは119以降で対応し、日本語として判定させるためにlang属性の指定が必要です。文節境界の検出は機械学習によるため、常に制作者の意図した結果になるとは限りません。Chromeの解説でも、意図と違う結果になった場合は<wbr>などで手動調整する方法が案内されています。自動判定と手動指定は併用できます。

2026年8月時点で、ChromeとEdgeは119以降で対応、Firefoxは未対応、Safariの安定版も未対応です。Safari Technology Preview 246ではpreview機能として有効化されました。安定したクロスブラウザ制御ならkeep-allと<wbr>、ブラウザによる自動文節解析ならauto-phraseという選択になります。

改行だけで収まらない場合の文字サイズ調整

改行位置を整えても、コンポーネント自体がかなり狭くなれば、規定の文字サイズではレイアウトが収まらなくなります。普段は規定サイズを維持し、狭くなった場合だけ文字を少し小さくする制御に、Container Queryを使います。改行の指定に重ねて使う形です。

Media Queryは主にビューポートの幅を条件にします。Container Queryが条件にするのは、指定したquery container自身の寸法で、その子孫へスタイルを適用できます。

<div class="card">
  <span class="card__label">
    オンライン<wbr>予約
  </span>
</div>
.card {
  container-type: inline-size;
}

.card__label {
  font-size: 1.25rem;
  word-break: keep-all;
}

@container (max-width: 15rem) {
  .card__label {
    font-size: 1.125rem;
  }
}

コンテナが15remより広ければ1.25rem、15rem以下なら1.125remになります。15remは説明用の例であり、汎用的な正解値ではありません。使用するフォント、文字数、letter-spacing、padding、周囲の要素を含めて、どの幅から見た目が崩れるかを確認して閾値を決めます。

Container Queryが検出しているのは、文字が二行になったという状態ではありません。判定しているのはquery containerの幅が条件を満たしたかどうかです。規定サイズで問題がないことを確かめてから幅を徐々に狭め、崩れ始める幅を確認し、その付近を@containerの閾値に設定します。

複数のコンテナがある場合は名前を付けられます。

.card {
  container-name: card;
  container-type: inline-size;
}

@container card (max-width: 15rem) {
  .card__label {
    font-size: 1.125rem;
  }
}

短縮形ならcontainer: card / inline-size;と書けます。

container-type inline-sizeの注意点

container-typeにinline-sizeを指定する意味は、単に要素の幅を取得できるようにすることではありません。inline-size containmentが適用され、要素自身のインライン方向のサイズ計算が子要素の内容から切り離されます。query container自身の幅は、親レイアウトから決まる、Gridなどのトラックから決まる、明示的な幅を持つ、通常のブロック要素として親幅まで伸びるといった外部のレイアウト文脈から決定できる必要があります。MDNは、文脈上のサイズも明示的なサイズも得られない場合、size containmentを持つ要素は潰れると説明しています。container-typeは2023年2月以降Baseline Widely availableとされています。

連続的に変えるclamp

文字サイズを段階的ではなく連続的に変える場合はclamp()があります。

.title {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

最小値、推奨値、最大値の順に指定し、値を範囲内に収めます。問題が起こるまでは規定サイズを維持し、一定の幅を下回ったら初めて小さくするという制御とは別物です。その条件を扱うのはContainer Queryです。MDNは文字サイズにclamp()を使う場合、最大値を相対長とし、最小値の二倍を下回らない値にすることを推奨しています。ページを拡大したときに文字サイズが200パーセントまで拡大できるようにするためです。

目的と対応状況から指定を選ぶ

やりたいことと主な方法の対応は次のとおりです。組み合わせが必要なものは、必要な指定を並べています。

  • 内容として必ず指定位置で改行するなら<br>
  • 必要な場合だけ指定位置を折り返し候補にするなら<wbr>
  • 日本語の文字途中での折り返しを抑えるならword-breakのkeep-all
  • 日本語を指定した位置中心で折り返すならkeep-allと<wbr>
  • 通常改行に加えてさらに狭い場合の予備改行を作るなら<br>と<wbr>とkeep-all
  • 特定の語句だけ途中で分割したくないなら部分的なwhite-spaceのnowrap
  • 自動折り返しそのものを禁止するならwhite-spaceのnowrap
  • 入力データに含まれる改行を表示へ反映するならwhite-spaceのpre-line
  • 改行と空白を両方保持するならwhite-spaceのpre-wrap
  • 長いURLや英数字をはみ出させないならoverflow-wrapのanywhere
  • CJKの句読点や記号の禁則処理を調整するならline-break
  • 短い見出しの行バランスを改善するならtext-wrapのbalance
  • 本文の折り返し品質を改善するならtext-wrapのpretty
  • 欧文をハイフン付きで折り返すならhyphensと&shy;
  • 日本語を自動で文節解析するならword-breakのauto-phrase
  • コンポーネントが狭い場合だけ文字サイズを変えるならContainer Query
  • 文字サイズを連続的に可変にするならclamp()

2026年8月時点のブラウザ対応の目安です。

  • <br>は現行の主要ブラウザで対応
  • <wbr>は現行の主要ブラウザで広く対応
  • word-breakのkeep-allは現行の主要ブラウザで広く対応
  • white-spaceは現行の主要ブラウザで広く対応
  • overflow-wrapは現行の主要ブラウザで広く対応
  • line-breakは現行の主要ブラウザで広く対応
  • hyphensは広く対応。ただし言語と辞書による差あり
  • Container Queryは現行の主要ブラウザで広く対応
  • text-wrapのbalanceはChromeとEdgeが114以降、Firefoxが121以降、Safariが17.5以降
  • text-wrapのprettyはChromeとEdgeが117以降、Safariが26以降で、Firefoxは未対応
  • word-breakのauto-phraseはChromiumが119以降。FirefoxとSafari安定版は未対応で、Safari Technology Previewではpreview機能

指定を決めるまでに確認する項目は五つです。

  • 本当に常時改行が必要か
  • 必要な場合だけ改行できればよいか
  • どこを意味上の改行候補にしたいか
  • 日本語の通常の折り返しを抑える必要があるか
  • それでも狭い場合に文字サイズを変更する必要があるか

短い日本語のボタン、カード、ナビゲーションで最初に置く指定は、<wbr>とword-breakのkeep-allの二つです。それでも特定の幅でレイアウトが収まらなくなった場合に、Container Queryを重ねます。長いURLを含む要素にはoverflow-wrapのanywhereを、二行になったときの行長を揃えたい見出しにはtext-wrapのbalanceを、それぞれ足します。

タイトルとURLをコピーしました