overflow-wrap

長いURLや英単語が行の幅を超えるとき、文字列の途中で折り返してよいかを指定するプロパティ。分割できない文字列を使い、箱からのはみ出し方を比べます。

CSSの`overflow-wrap`とは？

長いURLや分割できない英単語をライブプレビューで折り返しながら、normal・anywhere・break-wordの違いを初学者向けに解説します。

遊んでみよう

分割できない長い文字列の折り返しと最小幅を比較

固定幅overflowwrapbeginnerguide20260808abcdefghijklmnopqrstuvwxyz0123456789

min-content幅overflowwrapbeginnerguide20260808abcdefghijklmnopqrstuvwxyz0123456789

normal：固定幅の文字列とmin-contentの箱がはみ出します

CSS

.element overflow-wrap: normal;

値のパターン

長い文字列の折り返し overflow-wrap

overflow-wrapの構成要素

01normal

通常の改行位置だけを使う

空白などの通常の分割位置で改行します。区切りのない長いURLや単語は、箱からはみ出すことがあります。

02anywhere

必要なときは文字列の途中で分ける

ほかに改行できる場所がなければ任意の位置で分割し、その改行候補をmin-contentの幅にも反映します。

03break-word

折り返すが最小幅の計算は変えない

表示上はanywhereと同じように長い文字列を分割しますが、追加した改行候補をmin-contentの計算には使いません。

早見表

初期値はnormalです。長いURLなどで横方向のはみ出しを防ぐなら、まずanywhereを試すと目的が伝わりやすくなります。

01normal通常の位置だけで改行初期値

02anywhere必要なら任意の位置で改行最小幅にも反映

03break-word必要なら任意の位置で改行最小幅には未反映

04initial初期値のnormalへ戻すグローバル

05inherit親要素の指定値を受け継ぐグローバル

よくある使い方

長いURLをカード内へ収める

区切りの少ないURLへanywhereを指定すると、狭いカードでも横方向へ突き抜けずに表示できます。

.card-url { overflow-wrap: anywhere; }

ユーザーが入力した文字列を守る

コメントやプロフィールに長い連続文字が入っても、レイアウトを押し広げないよう途中で折り返します。

.user-content { overflow-wrap: anywhere; }

既存の折り返し指定を読み解く

古いコードでword-wrapやbreak-wordを見つけたら、長い文字列のはみ出し対策として使われているか確認します。

.legacy-content { overflow-wrap: break-word; }

ポイント

折り返しを許可するwhite-spaceと組み合わせる。

overflow-wrapの初期値はnormalで、テキスト要素に適用され、子要素へ継承されます。normalは空白などの通常の改行位置だけを使い、anywhereとbreak-wordはほかに改行位置がないとき長い文字列を途中で分割します。分割位置にハイフンは入りません。anywhereは追加した改行候補をmin-contentの幅へ反映しますが、break-wordは反映しません。white-space: nowrapのように自動折り返し自体を止めている場合は、overflow-wrapを指定しても行は折り返されません。word-wrapはoverflow-wrapの旧名として使われる別名です。word-breakは文字列全体の改行規則を変える別のプロパティです。