CSSの改行と折り返しを整理する

ラベルを折り返したくないときにwhite-space: nowrap、見出しの行の長さをそろえたいときにtext-wrap: balance。white-spaceとtext-wrapを、使う場面だけ覚えて何となく選んでいませんか。

どちらも折り返しに関わりますが、同じnowrapがある一方で、使える値は違います。ほかの指定と組み合わせるときには、何が変わるのか分かりにくいこともあります。

そこで、それぞれが何を設定しているかを確認します。空白を残したいときや、長い文字列を折り返したいときにも、必要な指定を選びやすくなります。

1. white-spaceとtext-wrapは、どちらもショートハンド

よく使うこの2つは、実はどちらもショートハンドプロパティです。1つの宣言で、複数の個別プロパティをまとめて設定します。

white-spaceがまとめて設定するのは、折り返しの許可と空白の処理です。一方、text-wrapは、折り返しの許可と行の配置をまとめて設定します。それぞれを個別のプロパティで表すと、次の関係になります。

両方にnowrapがあるのは、折り返しの許可を設定するtext-wrap-modeを共有しているためです。ただし、ほかに設定する内容は異なります。まずは、この共通部分の動作から確認します。

出典：MDN：white-space / MDN：text-wrap

2. 折り返しの許可を設定するtext-wrap-mode

text-wrap-modeは、要素の幅に合わせた折り返しを許可するかを設定します。値はwrapとnowrapです。

折り返しの有無だけを変えたい場合は、次のように個別に指定できます。

.label {
  text-wrap-mode: nowrap;
}

この指定では、空白の処理や行の配置は変更しません。white-spaceとtext-wrapに共通する、折り返しの許可だけを設定しています。

たとえば、次の英文に同じ幅を指定すると、wrapは単語の間で折り返し、nowrapは1行のまま表示します。

<p class="sample">Text wrapping in CSS</p>

.sample {
  text-wrap-mode: wrap;
}

.sample {
  text-wrap-mode: nowrap;
}

このように、nowrapは文字を縮めたり、省略したりする指定ではありません。文字列が要素の幅より長い場合は、はみ出すことがあります。

3. 空白の処理を設定するwhite-space-collapse

次に、スペース・タブ・ソース中の改行の表示を確認します。これを設定するのがwhite-space-collapseです。white-spaceがまとめて指定するもう1つの設定で、折り返しの許可とは分けて指定できます。

代表的な値は、空白を折りたたむcollapseと、空白や改行を保持するpreserveです。空白の処理だけを変えたい場合は、次のように指定します。

.message {
  white-space-collapse: preserve;
}

出典：MDN：white-space-collapse

空白の折りたたみを具体例で確認する

たとえば、次のHTMLにはHello,とCSS!の間に半角スペースが4つあり、Text wrapping.の前には改行と2つのスペースがあります。

<p class="sample">Hello,    CSS!
  Text wrapping.</p>

.sample {
  white-space-collapse: collapse;
}

.sample {
  white-space-collapse: preserve;
}

.sample {
  white-space-collapse: preserve-breaks;
}

collapseでは、連続する半角スペースが1つにまとまり、この英文ではソース中の改行もスペースとして処理されます。これが空白の折りたたみです。

一方、preserveはスペースと改行を保持し、preserve-breaksは改行を保持しながらスペースを折りたたみます。幅に合わせた折り返しは、前の章で扱ったtext-wrap-modeで設定します。

ただし、ソース中の改行が必ずスペースになるわけではありません。日本語のように単語間にスペースを置かない言語では、改行文字が取り除かれる場合もあります。全角スペースやNBSP(改行しないスペース)も、通常の半角スペースとは扱いが異なります。

出典：W3C仕様：CSS Textの空白処理

white-spaceでまとめて指定する

空白の処理と折り返しの許可を一緒に指定するなら、white-spaceを使います。よく使う値を比べると、2つの設定がどのように組み合わされているかが分かります。

このうち、入力された改行と連続する空白を両方残すなら、pre-wrapを使います。一方、改行だけ残し、連続する空白をまとめるならpre-lineです。次の少し長い英文で、折り返しの有無も比べてみます。

<p class="sample">Hello,    CSS!
  Text wrapping makes lines easier to read.</p>

.sample {
  white-space: pre;
}

.sample {
  white-space: pre-wrap;
}

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

pre-wrapとbreak-spacesでは、行末のスペースの扱いが異なります。pre-wrapでは行末のスペースが行の幅に含まれずに表示されることがあります。break-spacesでは行末のスペースも幅を占め、保持された各スペースの後で折り返せます。

出典：MDN：white-spaceの値

ここまでで、white-spaceが設定する折り返しの許可と空白の処理を確認できました。続いて、text-wrapが設定する行の配置を見ていきます。

4. 行の配置を設定するtext-wrap-style

折り返しの許可を設定するtext-wrap-modeに加えて、text-wrapは各行の配置も設定します。その個別プロパティがtext-wrap-styleです。通常は行の端まで入るだけ文字を配置して折り返しますが、balanceやprettyを指定すると、複数の行の配置を考慮して折り返し位置を調整します。

text-wrap-styleの値と使いどころ

折り返しを許可した状態で、行をどう配置するかを選びます。

たとえば、見出しの各行の長さをそろえたい場合は、次のように指定します。折り返しの許可や空白の処理は変わりません。

.headline {
  text-wrap-style: balance;
}

折り返しの許可もまとめて指定するなら、text-wrapを使います。text-wrap: balanceはtext-wrap-mode: wrapとtext-wrap-style: balanceの組み合わせです。通常の折り返しはtext-wrap: wrap(wrapとauto)、折り返しを禁止するならtext-wrap: nowrap(nowrapとauto)を指定できます。

<p class="sample">CSS の改行と折り返しを理解して、読みやすい見出しと文章を表示するための指定を確認する</p>

.sample {
  text-wrap: wrap;
}

.sample {
  text-wrap: balance;
}

.sample {
  text-wrap: pretty;
}

balanceは実際の文字幅をもとに各行の長さをそろえます。要素の幅自体は変えません。計算対象の行数にはブラウザーごとに上限があり、数行の見出しに向いています。

出典：Chrome Developers：balance解説

prettyは、最終行に単語が1つだけ残る状態を減らすなど、行の配置を調整します。アルゴリズムはブラウザーごとに異なり、文章や幅によっては通常のwrapと同じ表示になります。

出典：Chrome Developers：pretty解説 / WebKit公式ブログ：pretty解説

ショートハンドを組み合わせるときの注意

最初の章の表のとおり、white-spaceとtext-wrapは同じtext-wrap-modeを設定します。そのため、同じ優先順位の宣言では、次のコードは折り返しを許可します。

.label {
  white-space: nowrap;
  text-wrap: balance; /* text-wrap-mode も wrap に設定する */
}

後のtext-wrap: balanceが、text-wrap-modeをwrapに変更するためです。折り返しの許可を変更せず、配置だけを指定する場合はtext-wrap-style: balanceを使います。

また、text-wrap: nowrapは空白の処理を変えません。white-space: nowrapと同じ表示になるのは、空白の処理がもともとcollapseだった場合です。

出典：MDN：text-wrap

ただし、行の長さを調整するには、折り返せる位置があることが前提です。そこで次は、英単語や日本語のどこを改行候補にするかを確認します。

5. どの位置で折り返せるか

たとえば英文では、通常は単語の間で折り返し、単語を途中で分けません。そのため、text-wrap: balanceで各行の長さをそろえても、英単語の途中で自由に折り返せるようになるわけではありません。

単語と単語の間のように、折り返せる位置を改行候補と呼びます。英単語の途中でも折り返せるようにするか、日本語の句読点の前で改行を許すかといった規則は、word-breakやline-breakなどで設定します。

word-break：単語や文字の間の改行候補

まず、文字や単語の間で折り返す基本の規則を設定するのがword-breakです。

たとえばbreak-allでは、英単語全体が次の行に収まる場合でも、現在の行の残り幅に合わせて単語を分けることがあります。長いURLだけでなく、短い英単語にも影響する指定です。

一方、keep-allは日本語などの文字間の改行を抑えますが、文節は解析しません。スペースや句読点、明示した改行候補などの扱いは別です。日本語の長い文章に単独で指定すると、改行候補が足りずにはみ出す場合があります。

文節の区切りを考慮するauto-phraseもあります。ただし、対応ブラウザーや対応言語には制約があります。解析結果も実装によって異なるため、指定した位置で必ず改行する機能ではありません。

出典：MDN：word-break

line-break：句読点や記号の前後の改行規則

日本語のように文字間で折り返せる場合でも、すべての位置で改行できるわけではありません。句読点や閉じかっこを行頭に置かない、開きかっこを行末に残さない、といった禁則処理の規則があるためです。line-breakは、その制約の強さを設定します。

strictは、小書きのゃ・っなどの前での改行も制限します。looseでは一部の文字や記号の前でも改行を許します。具体的な差は、言語とブラウザーの実装によって変わります。

出典：MDN：line-break

たとえば、次の短い文章を42pxの幅で表示すると、小書きのッや句点の前で折り返せるかを確認できます。

<p class="sample" lang="ja">きょうはキャップを買った。</p>

.sample {
  line-break: normal;
}

.sample {
  line-break: strict;
}

.sample {
  line-break: anywhere;
}

日本語にはlang="ja"を指定します。ブラウザーは言語情報をもとに組版規則を選びます。

<p lang="ja" class="japanese-copy">日本語の文章を表示します。</p>

.japanese-copy {
  word-break: normal;
  line-break: strict;
}

overflow-wrap：収まらない文字列を途中で折り返す

ここまでの通常の改行候補だけでは、長いURLやIDを1行に収められないことがあります。overflow-wrap: anywhereは、その場合に文字列の途中でも折り返せるようにします。単語全体を次の行へ送れば収まる場合は、単語を途中で分けません。ハイフンも挿入しません。

.article-body {
  word-break: normal;
  overflow-wrap: anywhere;
}

基本の改行規則を保ち、長い文字列のはみ出しを防ぐ組み合わせです。break-allとの違いを比較すると、適用する条件が分かります。

次の例では、documentationは1行に収まりますが、その後の長い文字列は収まりません。この2つを比べると、break-allが通常の単語にも影響することが分かります。

<p class="sample" lang="en">Read documentation and abcdefghijklmnopqrstuvwxyz.</p>

.sample {
  word-break: normal;
}

.sample {
  overflow-wrap: anywhere;
}

.sample {
  word-break: break-all;
}

line-break: anywhereが常に改行候補を広げるのに対し、overflow-wrap: anywhereは通常の候補だけでは収まらない場合に候補を追加します。後者も、ほかに折れる位置がなければ禁則に反する位置で折り返す場合があります。line-break: strictと組み合わせても、あらゆる状況で禁則を守る指定にはなりません。

出典：MDN：overflow-wrap / W3C仕様：CSS Textの改行規則

hyphens：ハイフン付きで単語を分割する

前項のoverflow-wrapは、単語の途中で折り返してもハイフンを追加しません。一方、英単語をハイフン付きで分割する場合はhyphensを使います。

ここで使うソフトハイフンは、折り返してもよい位置を示す、通常は見えない文字です。HTMLでは­と書きます。1行に収まるときは何も表示されず、その位置で折り返したときだけ行末にハイフンが現れます。

たとえば、inter­national­izationと書くと、幅が十分にある場合はハイフンなしでinternationalizationと表示されます。一方、幅が足りずに分割される場合は、inter-やnational-のように折り返された行末にだけハイフンが付きます。通常のハイフン (-) のように常に記号が表示されるわけではありません。

<p class="sample" lang="en">inter&shy;national&shy;ization</p>

.sample {
  width: 24ch;
  hyphens: manual;
}

.sample {
  width: 12ch;
  hyphens: manual;
}

このように、ソフトハイフンで指定した位置を使うのがmanualです。自動で分割位置を選ぶ場合はautoを指定します。

ただし、autoでは文章の言語をlangで指定します。利用できる辞書はOS・ブラウザー・言語によって異なり、構文に対応していても分割できない場合があります。

<p lang="en" style="hyphens: auto">A note on internationalization.</p>

出典：MDN：hyphensとソフトハイフン

HTMLで改行位置を指定する

ここまではCSSで規則を設定してきましたが、HTMLで文章中に位置を指定する方法もあります。必ず改行する<br>と、幅が足りないときだけ折り返す<wbr>は使い分けます。

日本語の見出しで、文節の区切りに改行候補を指定したい場合は、keep-allと<wbr>を組み合わせます。

<h2 class="phrase-title">日本語の改行を<wbr />CSS で設定する</h2>

.phrase-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

keep-allで文字間の改行を抑え、<wbr>の位置を候補にします。overflow-wrap: anywhereも指定すると、候補間の文字列が幅に収まらない場合に途中で折り返せます。<wbr>単独では、ほかの日本語の文字間の改行を抑えられません。また、この例のように半角スペースがあれば、その位置でも折り返せます。

出典：WHATWG HTML仕様：wbr

なお、text-wrap-mode: nowrap (またはwhite-space: nowrap) で折り返し自体を禁止している場合は、word-breakやoverflow-wrapで候補を増やしても、幅に合わせた自動折り返しは行われません。

用途別の指定

実際の指定では、空白の処理・折り返しの許可・行の配置・改行候補から、必要な設定を組み合わせます。代表的な用途を一覧にしました。

本文・見出し・コードでは必要な設定が異なります。空白の処理、折り返しの許可、行の配置、改行候補を分けて考えると、変更するプロパティを選べます。

対応状況と参考資料

掲載した表示例は、閲覧中のブラウザーのCSSで表示しています。そのため、フォント・OS・言語の解析によって改行位置は変わります。

text-wrapの各値やauto-phraseなどは、値ごとに対応状況が異なります。各節のMDNの互換性表と、対象環境での表示を確認してください。確認日：2026年10月14日。

• W3C：CSS Text Module Level 3：空白処理、禁則、単語分割の仕様。
• W3C：CSS Text Module Level 4：text-wrapなどの拡張。策定中の仕様を含みます。
• W3C：日本語組版処理の要件：日本語の改行と組版の要件。