CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － word-break制御

Web APP CSS
スポンサーリンク

word-break は「単語のどこで折り返すか」をコントロールするプロパティ

テキストが枠からはみ出すとき、
どこで折り返すか（または折り返さないか） を決めるのが word-break です。

特に日本語・英語・URL・長い英単語・メールアドレスなど、
言語や文字種によって折り返し方が変わるため、
UI デザインでは必須のテクニックです。

ここでは CSS と Tailwind CSS の両方で、
初心者でも迷わないように例題を交えて丁寧に解説します。

word-break の基本種類と挙動

normal（デフォルト）

  • 英語：単語単位で折り返す
  • 日本語：どこでも折り返せる
  • URL：折り返しにくい（はみ出しやすい）

break-all

  • 英語：単語の途中でも折り返す
  • 日本語：どこでも折り返す
  • URL：強制的に折り返す（便利）

keep-all

  • 英語：単語単位で折り返す
  • 日本語：折り返しを極力しない（韓国語向け）
  • 日本語サイトではほぼ使わない

例1：英語の長い単語を途中で折り返す（break-all）

CSS 版

.break-all {
  word-break: break-all;
}
CSS
<p class="break-all">
  supercalifragilisticexpialidocious
</p>
HTML

→ 単語の途中で折り返されるため、レイアウトが崩れない。

Tailwind 版

<p class="break-all">
  supercalifragilisticexpialidocious
</p>
HTML

深掘りポイント
英語の長い単語は normal だと折り返されず、
横スクロールが発生して UI が壊れます。
break-all は「英語の長い単語対策」として非常に重要です。

例2：URL やメールアドレスを強制的に折り返す（break-all）

CSS 版

.url {
  word-break: break-all;
}
CSS
<p class="url">
  https://example.com/this/is/a/very/very/very/long/url
</p>
HTML

Tailwind 版

<p class="break-all">
  https://example.com/this/is/a/very/very/very/long/url
</p>
HTML

深掘りポイント
URL は「スラッシュやドットの位置でしか折り返せない」ため、
normal のままだとほぼ折り返されません。
管理画面・チャット・コメント欄では break-all が必須です。

例3：日本語の文章は normal が最適（自然な折り返し）

CSS 版

.jp-text {
  word-break: normal;
}
CSS
<p class="jp-text">
  日本語はどこでも折り返せるため、normal が最も自然です。
</p>
HTML

Tailwind 版

<p class="break-normal">
  日本語はどこでも折り返せるため、normal が最も自然です。
</p>
HTML

深掘りポイント
日本語は単語の区切りが明確ではないため、
normal のままで自然な折り返しになります。
break-all を使うと逆に読みにくくなることがあります。

例4：テーブルのセルで長い文字列を折り返す（管理画面で必須）

CSS 版

.table-cell {
  max-width: 200px;
  word-break: break-all;
}
CSS
<td class="table-cell">
  verylongfilename_with_no_spaces_2026_version_final_final.pdf
</td>
HTML

Tailwind 版

<td class="max-w-[200px] break-all">
  verylongfilename_with_no_spaces_2026_version_final_final.pdf
</td>
HTML

深掘りポイント
テーブルは横幅が限られるため、
長い文字列を break-all で折り返さないと UI が崩れます。

例5：ボタン内の英語を折り返さない（nowrap と組み合わせ）

CSS 版

.button {
  white-space: nowrap;
  word-break: keep-all;
}
CSS

Tailwind 版

<button class="whitespace-nowrap break-keep px-4 py-2 bg-blue-600 text-white rounded">
  Download Now
</button>
HTML

深掘りポイント
ボタンは折り返すと高さが変わり UI が崩れるため、
nowrap × keep-all が最適です。

word-break と white-space の関係（ここが一番大事）

white-space が優先される

例えば：

white-space: nowrap;
word-break: break-all;
CSS

→ 折り返し禁止（nowrap）が優先されるため、break-all は効かない。

よくある組み合わせ

1行省略（truncate）

  • white-space: nowrap;
  • overflow: hidden;
  • text-overflow: ellipsis;
  • word-break は不要

複数行省略（line-clamp）

  • overflow: hidden;
  • display: -webkit-box;
  • -webkit-line-clamp: N;
  • word-break: break-all を追加するとより安定

Tailwind の word-break クラス一覧

break-normal   → word-break: normal
break-words    → word-break: break-word（非標準だが便利）
break-all      → word-break: break-all
break-keep     → word-break: keep-all

特に break-words は Tailwind 独自で便利です。

実務テンプレート：用途別の最適な word-break 設計

日本語本文（自然な折り返し）

<p class="break-normal leading-relaxed">
  日本語の文章は normal が最適です。
</p>
HTML

英語の長い単語・URL（強制折り返し）

<p class="break-all">
  https://example.com/verylongurl/verylongurl/verylongurl
</p>
HTML

タイトル（折り返し禁止＋省略）

<h2 class="truncate whitespace-nowrap break-keep font-semibold">
  とても長いタイトルがここに入ります
</h2>
HTML

テーブルセル（長い文字列対策）

<td class="max-w-[180px] break-all">
  verylongfilename_2026_final_final.pdf
</td>
HTML

まとめ

word-break は
「どこで折り返すか」をコントロールするタイポグラフィの基礎技術 です。

ポイントは次の通りです。

  • 日本語 → normal
  • 英語の長い単語 → break-all
  • URL・メールアドレス → break-all
  • ボタンやタイトル → keep-all × nowrap
  • テーブル → break-all
  • Tailwind は break-all / break-normal / break-keep / break-words が便利

スポンサーリンク
タイトルとURLをコピーしました