CSSのtext-wrapで改行が整う。見出しと本文を崩さない実装ポイント

はじめに

レスポンシブな画面を作っていると、見出しの改行位置が中途半端になったり、本文の末尾だけが極端に短くなって読みにくく見えたりします。これまでは br を入れたり、画面幅ごとに細かく文字サイズを調整したりして対応することが多かったですが、運用が続くほど保守コストは増えがちです。

そんな場面で使いやすいのが CSS の text-wrap です。balance と pretty を使い分けると、見出しと本文の改行を CSS 側で整えやすくなります。

この記事では、基本の使い方から、カード UI や記事一覧でそのまま使いやすい実務向けのパターンまでまとめます。

機能やライブラリの概要

text-wrap は、テキストの折り返し方を調整するための CSS プロパティです。特に実務で使いやすいのが次の2つです。

• text-wrap: balance
  複数行に折り返された見出しや短いテキストの行長を、なるべく均等にそろえます。
• text-wrap: pretty
  本文や説明文で、極端に短い最終行や読みにくい折り返しを減らす方向で整えます。

便利なのは、HTML を変えずに改行の見え方を改善できることです。コンテンツが CMS から入るケースでも使いやすく、デザイン調整を CSS に寄せやすくなります。

基本の使い方

まずは見出しに text-wrap: balance を適用する最小構成です。これだけでも、ヒーロー見出しやカードタイトルの見え方がかなり安定します。

See the Pen text-wrap 1 by watanabe (@web-sourcecode) on CodePen.

HTML

<section class="hero">
  <h1 class="hero__title">
    新しい料金プランをわかりやすく比較できるダッシュボード
  </h1>
  <p class="hero__lead">
    チームで使う管理画面を、より迷わず操作できるように再設計しました。
  </p>
</section>

<section class="hero">
  <h1 class="hero__title">
    新しい料金プランをわかりやすく比較できるダッシュボード
  </h1>
  <p class="hero__lead">
    チームで使う管理画面を、より迷わず操作できるように再設計しました。
  </p>
</section>

CSS

.hero__title {
  max-inline-size: 12em;
  text-wrap: balance;
}

.hero__lead {
  max-inline-size: 40ch;
  text-wrap: pretty;
}

.hero__title {
  max-inline-size: 12em;
  text-wrap: balance;
}

.hero__lead {
  max-inline-size: 40ch;
  text-wrap: pretty;
}

見出しには balance、本文には pretty という分け方にすると意図が明確です。タイトルは形を整えたい、本文は読み心地を崩したくない、という役割の違いに合っています。

便利な使いどころ

text-wrap が特に効きやすいのは、次のような場面です。

• ファーストビューの大きな見出し
• カード一覧のタイトル
• ニュースやブログの抜粋文
• CTA バナーの短いコピー
• CMS 由来で改行位置を固定しづらいテキスト

たとえばカード UI では、タイトルの長さが揃わないだけでグリッド全体が少し雑然として見えます。そこでタイトルだけ balance を入れておくと、文字量のばらつきに対してレイアウトの印象を整えやすいです。

応用コード

実務では、見出し、説明文、バッジ付きカードをまとめて扱うことが多いです。次の例では、カードタイトルの改行バランスと、説明文の読みやすさを CSS だけで調整しています。

See the Pen text-wrap 2 by watanabe (@web-sourcecode) on CodePen.

HTML

<section class="feature-grid">
  <article class="feature-card">
    <p class="feature-card__eyebrow">Case Study</p>
    <h2 class="feature-card__title">
      複数店舗の在庫確認をひとつの画面で完結できる管理 UI
    </h2>
    <p class="feature-card__body">
      商品検索、在庫移動、発注確認までを同じ導線に整理し、日々の確認作業を短くした事例です。
    </p>
    <a href="#" class="feature-card__link">詳細を見る</a>
  </article>

  <article class="feature-card">
    <p class="feature-card__eyebrow">Update</p>
    <h2 class="feature-card__title">
      会員ランク表示を見直してキャンペーン導線を改善したデザイン
    </h2>
    <p class="feature-card__body">
      長めの説明文でも末尾だけが不自然に短くなりにくく、モバイルでも読みやすさを保ちやすくなります。
    </p>
    <a href="#" class="feature-card__link">詳細を見る</a>
  </article>
</section>

<section class="feature-grid">
  <article class="feature-card">
    <p class="feature-card__eyebrow">Case Study</p>
    <h2 class="feature-card__title">
      複数店舗の在庫確認をひとつの画面で完結できる管理 UI
    </h2>
    <p class="feature-card__body">
      商品検索、在庫移動、発注確認までを同じ導線に整理し、日々の確認作業を短くした事例です。
    </p>
    <a href="#" class="feature-card__link">詳細を見る</a>
  </article>

  <article class="feature-card">
    <p class="feature-card__eyebrow">Update</p>
    <h2 class="feature-card__title">
      会員ランク表示を見直してキャンペーン導線を改善したデザイン
    </h2>
    <p class="feature-card__body">
      長めの説明文でも末尾だけが不自然に短くなりにくく、モバイルでも読みやすさを保ちやすくなります。
    </p>
    <a href="#" class="feature-card__link">詳細を見る</a>
  </article>
</section>

CSS

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  padding: 24px;
  border: 1px solid oklch(0.88 0.02 240);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.feature-card__eyebrow {
  margin: 0 0 12px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.45 0.08 240);
}

.feature-card__title {
  margin: 0;
  max-inline-size: 16ch;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.2;
  text-wrap: balance;
}

.feature-card__body {
  margin-top: 16px;
  max-inline-size: 34ch;
  line-height: 1.7;
  color: oklch(0.35 0.02 240);
  text-wrap: pretty;
}

.feature-card__link {
  display: inline-flex;
  margin-top: 20px;
  font-weight: 700;
  color: oklch(0.42 0.14 250);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  padding: 24px;
  border: 1px solid oklch(0.88 0.02 240);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.feature-card__eyebrow {
  margin: 0 0 12px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.45 0.08 240);
}

.feature-card__title {
  margin: 0;
  max-inline-size: 16ch;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.2;
  text-wrap: balance;
}

.feature-card__body {
  margin-top: 16px;
  max-inline-size: 34ch;
  line-height: 1.7;
  color: oklch(0.35 0.02 240);
  text-wrap: pretty;
}

.feature-card__link {
  display: inline-flex;
  margin-top: 20px;
  font-weight: 700;
  color: oklch(0.42 0.14 250);
}

この例では、見出しを 16ch に収めつつ balance で行長を整えています。本文には pretty を使って、カード幅が変わっても末尾の見た目が崩れにくいようにしています。max-inline-size と組み合わせると効果が見えやすいです。

注意点

• 万能な自動整形ではありません
  text-wrap は改行を補助する機能なので、極端に長い単語や URL の折り返しは別途 overflow-wrap なども必要です。
• 見出しと本文で使い分けるほうが安全です
  すべてに balance を入れるより、見出しは balance、本文は pretty のように目的別に分けたほうが意図しない見え方を減らせます。
• 行幅の設計とセットで考えます
  max-inline-size が広すぎると効果が分かりにくく、狭すぎると逆に窮屈に見えます。タイポグラフィ設計と一緒に調整するのが大切です。
• 古い調整方法をすぐ消しすぎないほうが安全です
  既存案件では br や個別の表示調整が残っていることがあります。差し替え時は実画面で確認しながら段階的に置き換えるのが現実的です。

まとめ

text-wrap: balance と text-wrap: pretty を使うと、見出しと本文の改行を HTML に手を入れず整えやすくなります。特にコンテンツ量が一定でない UI や、CMS からテキストが流し込まれる場面では効果が分かりやすいです。

まずはカードタイトルやファーストビューの見出しに balance を入れ、説明文には pretty を試すところから始めると判断しやすいです。大きな仕組みを増やさず、CSS だけで読みやすさを底上げできるのがこの機能の強みです。

ポイント

• 見出しの見た目を整えたいなら text-wrap: balance が扱いやすい
• 本文や説明文の読み心地を整えたいなら text-wrap: pretty が相性良い
• max-inline-size と組み合わせると実務画面で効果を確認しやすい
• CMS コンテンツやカード UI のような文字量が揺れる場面で特に使いやすい

参考リンク

• text-wrap | MDN
• CSS Text Module Level 4
• Improving line breaks with CSS text-wrap | Chrome for Developers