Yugien - 遊戯苑
テーマ

CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

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

やさしい説明

word-break は「文章のどこで行を折り返してよいか」を決めるスイッチです。

長い英単語やURLがはみ出すのを、無理やり途中で切って改行してよいか／なるべく単語の区切りで折り返すか、を選べます。

もう少し正確な説明

word-break は折り返し（改行）の許可位置を制御します。

よく使う値は次の3つです：

normal
基本の挙動。英語は単語の区切りで折り返し。日本語・中国語・韓国語は文字符号のルールに従って自然に折り返し。
break-all
どこでも切ってOK。英単語やURLも文字の途中で折り返します（可読性は下がりやすい）。
keep-all
できるだけ途中で切らない。主に CJK 以外の言語では単語区切りを優先し、韓国語などで不自然な分断を避けたいときに使います。

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>

ポイント