A switch that decides whether long words/URLs may break in the middle or should wrap at natural boundaries, helping you balance layout stability and readability.
word-break
は「文章のどこで行を折り返してよいか」を決めるスイッチです。
長い英単語やURLがはみ出すのを、無理やり途中で切って改行してよいか/なるべく単語の区切りで折り返すか、を選べます。
word-break
は折り返し(改行)の許可位置を制御します。
よく使う値は次の3つです:
normal
break-all
keep-all
word-break: break-word;
はレガシー扱いで、実際には overflow-wrap: anywhere;
に近い動きをします。
推奨:途中での折り返しを許したいときは overflow-wrap
を使う方がモダンで安全です。
overflow-wrap
(旧 word-wrap
)hyphens
hyphens: auto
)。lang
属性や辞書の有無で効果が変わります。まずは overflow-wrap: anywhere;
または overflow-wrap: break-word;
(互換のため)で、レイアウト崩れを防ぐ。
それでも狭い横幅で崩れるときの最後の切り札が word-break: break-all;
(可読性が落ちるので最終手段)。
韓国語などで不自然な字割りを避けたい:word-break: keep-all;
を検討。
HTML
<style>
/* まずは推奨:長い単語やURLがはみ出しそうなら途中で折り返し可 */
.safe-wrap {
overflow-wrap: anywhere;
/* 古いブラウザ向けの併記(必要に応じて) */
overflow-wrap: break-word;
word-wrap: break-word; /* さらに古い名前 */
}
/* どうしても収まらない時の最終手段:どこでも切る */
.force-break {
word-break: break-all;
}
/* 可能なら途中で切らない(主に CJK での自然な折り返しを維持) */
.keep-all {
word-break: keep-all;
}
</style>
<div class="safe-wrap">
これはとても長いURLです: https://example.com/superlongpath/superlongpath/superlongpath?with=aVeryLongQueryStringThatNeverEnds
</div>
<div class="force-break" style="width: 180px; border: 1px solid #ccc; margin-top: 12px; padding: 8px;">
Supercalifragilisticexpialidocious
</div>
<div class="keep-all" style="width: 180px; border: 1px solid #ccc; margin-top: 12px; padding: 8px;">
日本語や中国語の文章は、自然な位置で折り返されます。
</div>
ポイント
.safe-wrap
(overflow-wrap
)で様子を見る → ダメなら .force-break
。.keep-all
で“むやみに途中で切らない”。