CSSでテキストを折り返し（自動改行）する方法

2022年4月7日2022年4月19日

テキストの折り返しを設定するためのCSSのプロパティっていくつもあってややこしいですよね。設定しても思い通りに改行されないムキー！となっているあなた、落ち着いてください。ここに解決策があります。

用語の説明

CJK言語

CJK（中国語、日本語、韓国語など）は単語と単語の間にスペースが入らない言語です。また、原則として単語の途中の改行が許容されています。この記事ではこのような言語を「日本語」と表現しています。

CJK以外の言語

CJK以外の多くの言語は単語と単語の間にスペースが入ります。また、原則として単語の途中の改行が許容されていません。この記事ではこのような言語を「英語」と表現しています。

ホワイトスペース

半角スペース、タブ、改行文字のことを指します。

改行ポイント

テキストが表示領域の端まで来た時に自動改行が許容される位置のこと。

英語の標準的な改行ポイントは、ホワイトスペース、ハイフン - 、疑問符 ? です。日本語の標準的な改行ポイントは、ホワイトスペース、全角スペース、句読点、 。、ハイフン - 、疑問符 ? および単語の途中です。

禁則処理

特定の文字が行頭や行末にあってはならない場合に、それを回避する処理のことです。例えば句読点、 。や閉じ括弧」 ）が行頭に位置しないようにします。

改行位置の設定 word-break

プロパティ word-break は文字列の改行位置をどこにするかを設定します。次の4つの値を取ります。

値	英語	日本語
normal	標準的な改行ポイントで自動改行。長い単語は改行されずにはみ出す。	単語の途中でも自動改行。
break-all	単語の途中でも自動改行。禁則処理は解除される。	単語の途中でも自動改行。禁則処理は解除される。
keep-all	標準的な改行ポイントで自動改行。長い単語は改行されずにはみ出す。	単語の途中を除く標準的な改行ポイントで自動改行。長い文字列は改行されずにはみ出す。
break-word （非推奨）	標準的な改行ポイントで自動改行。長い単語は途中で改行。	単語の途中でも自動改行。

設定と表示例

normal

<p>
The longest word in English is pneumonoultramicroscopicsilicovolcanoconiosis.
英語で最も長い単語は、ニューマノウアルトラマイクロスコピックシリコーボルケノコロニオシスです。
</p>

<style>
p{
    width: 150px;
    border: solid 1px #ccc;
    word-break: normal;
}
</style>

The longest word in English is pneumonoultramicroscopicsilicovolcanoconiosis. 英語で最も長い単語は、ニューマノウアルトラマイクロスコピックシリコーボルケノコロニオシスです。

読みやすさ優先。はみ出してもしょうがない。

break-all

<p>
The longest word in English is pneumonoultramicroscopicsilicovolcanoconiosis.
英語で最も長い単語は、ニューマノウアルトラマイクロスコピックシリコーボルケノコロニオシスです。
</p>

<style>
p{
    width: 150px;
    border: solid 1px #ccc;
    word-break: break-all;
}
</style>

どんなに短い英単語の途中でも改行される。読みやすさ無視。

keep-all

<p>
The longest word in English is pneumonoultramicroscopicsilicovolcanoconiosis.
英語で最も長い単語は、ニューマノウアルトラマイクロスコピックシリコーボルケノコロニオシスです。
</p>

<style>
p{
    width: 150px;
    border: solid 1px #ccc;
    word-break: keep-all;
}
</style>

日本語のヘッドラインやキャッチコピーなどを変なところで改行させたくない時に使えそうです。長い文章には使わないかな。

break-word

<p>
The longest word in English is pneumonoultramicroscopicsilicovolcanoconiosis.
英語で最も長い単語は、ニューマノウアルトラマイクロスコピックシリコーボルケノコロニオシスです。
</p>

<style>
p{
    width: 150px;
    border: solid 1px #ccc;
    word-break: break-word;
}
</style>

読みやすさとはみ出したくない気持ちの両立。これがいちばん良さげだけど、非推奨なので使いません。代わりに overflow-wrap: break-word; を使いましょう。

はみ出した文字の折り返し設定 overflow-wrap (word-wrap)

プロパティ overflow-wrap は文字列が表示領域からはみ出る場合に、はみ出た部分を改行するかどうかを設定します。次の3つの値を取ります。

値	英語	日本語
normal	標準的な改行ポイントで自動改行。長い単語は改行されずにはみ出す。	単語の途中でも自動改行。
break-word	標準的な改行ポイントで自動改行。長い単語は途中で改行。表示領域の幅が決まっていなければ改行されない。	単語の途中でも自動改行。
anywhere	標準的な改行ポイントで自動改行。長い単語は途中で改行。表示領域の幅が決まっていなくても改行される。	単語の途中でも自動改行。

元々、Microsoft社の独自仕様としてプロパティ word-wrap が定義されていました。その後、CSSの標準仕様として overflow-wrap に改称されました。どちらのプロパティ名も使用できますが、正式名称は overflow-wrap なので、こちらを使用しましょう。

設定と表示例

normal

<p>
The longest word in English is pneumonoultramicroscopicsilicovolcanoconiosis.
英語で最も長い単語は、ニューマノウアルトラマイクロスコピックシリコーボルケノコロニオシスです。
</p>

<style>
p{
    width: 150px;
    border: solid 1px #ccc;
    overflow-wrap: normal;
}
</style>

読みやすさ優先。はみ出してもしょうがない。

break-word

<p>
The longest word in English is pneumonoultramicroscopicsilicovolcanoconiosis.
英語で最も長い単語は、ニューマノウアルトラマイクロスコピックシリコーボルケノコロニオシスです。
</p>

<style>
p{
    width: 150px;
    border: solid 1px #ccc;
    overflow-wrap: break-word;
}
</style>

読みやすさとはみ出したくない気持ちの両立。

anywhere

<p>
The longest word in English is pneumonoultramicroscopicsilicovolcanoconiosis.
英語で最も長い単語は、ニューマノウアルトラマイクロスコピックシリコーボルケノコロニオシスです。
</p>

<style>
p{
    width: 150px;
    border: solid 1px #ccc;
    overflow-wrap: anywhere;
}
</style>

読みやすさとはみ出したくない気持ちの両立。テーブルでも改行してくれる。

break-word と anywhere

表示領域の横幅が固定されている場合は、break-word と anywhere のどちらを使っても同じように表示されます。
フレックスボックスやテーブルなど表示領域の横幅が可変の場合は、break-word では意図したとおりに表示されないかも知れません。anywhere を使いましょう。

スペースと改行の設定 white-space

プロパティ white-space はホワイトスペース（半角スペース、タブ、改行文字）の扱いと改行の方法を設定します。

複数のホワイトスペースが連続している時に1つにまとめるかどうか。
ソース内の改行文字を表示に反映するかどうか。
表示領域の横幅に合わせて自動改行するかどうか。

値	ホワイトスペース	ソース内改行	自動改行
normal	まとめる	反映しない	する
nowrap	まとめる	反映しない	しない
pre	まとめない	反映する	しない
pre-wrap	まとめない	反映する	する
pre-line	まとめる	反映する	する
break-spaces	まとめない	反映する	する

設定と表示例

normal

<p>
    棒が一本あったとさ。葉っぱかな。葉っぱじゃないよヒロシだよ。ヒロシじゃないよジョニーだよ。
    ジョニーじゃないよアキラだよ。アキラじゃないよ俺だよ。お前誰だよ。
    あっというまに結局ヒロシさん。
</p>

<style>
p{
    width: 350px;
    border: solid 1px #ccc;
    white-space: normal;
}
</style>

棒が一本あったとさ。葉っぱかな。葉っぱじゃないよヒロシだよ。ヒロシじゃないよジョニーだよ。ジョニーじゃないよアキラだよ。アキラじゃないよ俺だよ。お前誰だよ。あっというまに結局ヒロシさん。

ホワイトスペースをまとめて、ソース内の改行を反映しないのはHTMLの基本中の基本の動作ですね。

nowrap

<p>
    棒が一本あったとさ。葉っぱかな。葉っぱじゃないよヒロシだよ。ヒロシじゃないよジョニーだよ。
    ジョニーじゃないよアキラだよ。アキラじゃないよ俺だよ。お前誰だよ。
    あっというまに結局ヒロシさん。
</p>

<style>
p{
    width: 350px;
    border: solid 1px #ccc;
    white-space: nowrap;
}
</style>

とにかく改行したくない！

pre

<p>
    棒が一本あったとさ。葉っぱかな。葉っぱじゃないよヒロシだよ。ヒロシじゃないよジョニーだよ。
    ジョニーじゃないよアキラだよ。アキラじゃないよ俺だよ。お前誰だよ。
    あっというまに結局ヒロシさん。
</p>

<style>
p{
    width: 350px;
    border: solid 1px #ccc;
    white-space: pre;
}
</style>

HTMLの<pre>タグと同じ表示になります。

pre-wrap

<p>
    棒が一本あったとさ。葉っぱかな。葉っぱじゃないよヒロシだよ。ヒロシじゃないよジョニーだよ。
    ジョニーじゃないよアキラだよ。アキラじゃないよ俺だよ。お前誰だよ。
    あっというまに結局ヒロシさん。
</p>

<style>
p{
    width: 350px;
    border: solid 1px #ccc;
    white-space: pre-wrap;
}
</style>

pre + 自動改行。

pre-line

<p>
    棒が一本あったとさ。葉っぱかな。葉っぱじゃないよヒロシだよ。ヒロシじゃないよジョニーだよ。
    ジョニーじゃないよアキラだよ。アキラじゃないよ俺だよ。お前誰だよ。
    あっというまに結局ヒロシさん。
</p>

<style>
p{
    width: 350px;
    border: solid 1px #ccc;
    white-space: pre-line;
}
</style>

break-spaces

<p>
    棒が一本あったとさ。葉っぱかな。葉っぱじゃないよヒロシだよ。ヒロシじゃないよジョニーだよ。
    ジョニーじゃないよアキラだよ。アキラじゃないよ俺だよ。お前誰だよ。
    あっというまに結局ヒロシさん。ここに連続スペース→                                                                                                                        
</p>

<style>
p{
    width: 350px;
    border: solid 1px #ccc;
    white-space: break-spaces;
}
</style>

棒が一本あったとさ。葉っぱかな。葉っぱじゃないよヒロシだよ。ヒロシじゃないよジョニーだよ。ジョニーじゃないよアキラだよ。アキラじゃないよ俺だよ。お前誰だよ。あっというまに結局ヒロシさん。ここに連続スペース→

pre-wrap とほぼ同じですが、break-spaces は行末にホワイトスペースがある場合にそれを折り返します。pre-wrap は折り返さずに表示領域の外にはみ出し（ぶら下げ）ます。

禁則処理の設定 line-break

プロパティ line-break はCJK言語の禁則処理の厳格さを設定します。次の5つの値を取ります。

auto	ブラウザに依存した禁則処理をする。
loose	最も制限の少ない禁則処理をする。
normal	一般的な禁則処理をする。
strict	最も厳格な禁則処理をする。
anywhere	禁則処理をしない。

word-break と overflow-wrap の違い

word-break は、文字列をどう改行するかの設定です。標準的な改行ポイントを無視して改行するように（あるいは改行しないように）設定することもできます。

overflow-wrap は、標準的な改行をしてもなお表示領域をはみ出してしまう場合に、はみ出した部分を折り返すかどうかの設定です。標準的な改行ポイントでは必ず改行されることが前提です。

自動改行の強制が効かない場合の対処法

overflow-wrap: break-word; を設定しても意図したとおりに改行してくれないことがあります。これは親要素（表示領域）の横幅が内容によって変化するケースで発生します。例えばフレックスボックスやテーブルのセルがこれに当てはまります。

ボックス氏

私はテキスト氏の長さに合わせて自分の横幅を決めますよ

テキスト氏

僕はボックス氏の横幅に合わせて折り返し位置を決めるよ

そして横幅も折り返し位置も決まらぬままズルズルと横に伸びる2人だった…

<p>break-word を設定しても改行されない</p>

<table>
<tr>
<td>pneumonoultramicroscopicsilicovolcanoconiosis</td>
<td>pneumonoultramicroscopicsilicovolcanoconiosis</td>
<td>pneumonoultramicroscopicsilicovolcanoconiosis</td>
</tr>
</table>

<style>
td{
    border: solid 1px #ccc;
    overflow-wrap: break-word;
}
</style>

break-word を設定しても改行されない

pneumonoultramicroscopicsilicovolcanoconiosis

解決策1

break-word の代わりに anywhere を使います。anywhere は、まさにこんな時のための設定です。最もスマートな解決策ですね。

<p>anywhere で解決</p>

<table>
<tr>
<td>pneumonoultramicroscopicsilicovolcanoconiosis</td>
<td>pneumonoultramicroscopicsilicovolcanoconiosis</td>
<td>pneumonoultramicroscopicsilicovolcanoconiosis</td>
</tr>
</table>

<style>
td{
    border: solid 1px #ccc;
    overflow-wrap: anywhere;
}
</style>

anywhere で解決

pneumonoultramicroscopicsilicovolcanoconiosis

解決策2

親要素（表示領域）の横幅が決まっていないから改行ポイントが決まらないということなので、親要素の横幅を指定しまえばいいのです。

<p>td をインラインブロックにして width を設定</p>

<table>
<tr>
<td>pneumonoultramicroscopicsilicovolcanoconiosis</td>
<td>pneumonoultramicroscopicsilicovolcanoconiosis</td>
<td>pneumonoultramicroscopicsilicovolcanoconiosis</td>
</tr>
</table>

<style>
td{
    display: inline-block;
    width: 33%;
    border: solid 1px #ccc;
    overflow-wrap: break-word;
}
</style>

td をインラインブロックにして width を設定

pneumonoultramicroscopicsilicovolcanoconiosis

これでもう改行のことで悩むことはなくなったのではないでしょうか。私も今夜はぐっすり眠れそうです。

でわでわ

この記事が気に入ったら
いいねまたはフォローしてね！

Follow @kdmasawo Follow Me

シェアしてね

CSSでテキストを折り返し（自動改行）する方法

用語の説明

改行位置の設定 word-break

設定と表示例

normal

break-all

keep-all

break-word

はみ出した文字の折り返し設定 overflow-wrap (word-wrap)

設定と表示例

normal

break-word

anywhere

スペースと改行の設定 white-space

設定と表示例

normal

nowrap

pre

pre-wrap

pre-line

break-spaces

禁則処理の設定 line-break

word-break と overflow-wrap の違い

自動改行の強制が効かない場合の対処法

解決策1

解決策2

コメント

コメントするコメントをキャンセル

CSSでテキストを折り返し（自動改行）する方法

用語の説明

改行位置の設定 word-break

設定と表示例

normal

break-all

keep-all

break-word

はみ出した文字の折り返し設定 overflow-wrap (word-wrap)

設定と表示例

normal

break-word

anywhere

スペースと改行の設定 white-space

設定と表示例

normal

nowrap

pre

pre-wrap

pre-line

break-spaces

禁則処理の設定 line-break

word-break と overflow-wrap の違い

自動改行の強制が効かない場合の対処法

解決策1

解決策2

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル