CSSのword-breakを完全解説！初心者からプロまでの5つのコード例

はじめに
CSSとword-breakプロパティとは
- word-breakプロパティの基本
word-breakの使い方
word-breakの詳細なカスタマイズ方法
- サンプルコード6：異なるブラウザ対応の方法
- サンプルコード7：複合的なCSSルールの設定
word-breakを使ったよくあるエラーと対処法
- 中途半端な位置で折り返される場合
- 西洋言語が不適切に折り返される場合
word-breakの応用例
エンジニアなら知っておくべきword-breakの豆知識
- 歴史的背景と発展
- word-breakと関連プロパティ
まとめ
関連記事

はじめに

CSSのword-breakは、長いURL、英単語、商品コード、日本語を含む文章の折り返しを制御するプロパティです。初心者のコーディングでは、widthやmax-widthを整えても文字列だけがはみ出すことがあり、原因はCSSの折り返し規則にある場合があります。

ウェブ開発で本文、表、カードUI、コメント欄、コード表示を扱うなら、CSSのword-breakとoverflow-wrapの役割を分けて理解します。レスポンシブデザインでは画面幅が狭いほど文字列の逃げ場が減り、CSSの指定が読みやすさと横スクロールの有無を左右するのが基本です。

動作確認環境

HTML Living Standard / CSS Text Module Level 3
Google Chrome 126 / Firefox 127 / Safari 17

📖 この記事で学べること

word-breakの値ごとの違い
長いURLや英単語を崩れにくくするCSS設計
overflow-wrapやhyphensとの使い分け
レスポンシブデザインでの折り返し調整
初心者がつまずきやすい表示崩れの直し方

CSSとword-breakプロパティとは

word-breakは、文字列をどこで改行してよいかをCSS側から調整する指定です。normalはブラウザ標準の言語別ルール、break-allは文字単位の強い折り返し、keep-allは主にCJKテキストで不用意な分割を抑える値です。

.sample-text {
  width: 220px;
  word-break: break-all;
}

結果: 期待される表示では、幅の狭い要素内で長い文字列が途中で折り返され、横方向のはみ出しを抑えます。

HTMLが文書構造を作り、CSSが見た目と配置を担当する関係で見ると整理しやすいです。<p>、<div>、<span>、<table>などへ、font-size、line-height、max-width、paddingと同じ流れでCSSの折り返し規則を与えます。

公式ドキュメントでは、MDNのword-break解説が内容ボックスから文字があふれる場面の改行可否を扱い、MDNのoverflow-wrap解説は分割できない文字列が行ボックスからあふれる場合の改行挿入を扱いるのが目安です。

英語では単語途中の分割が読みにくく、日本語では単語境界が空白で示されないため挙動が変わりますし、ここがポイントです。プログラミング中はCSSだけでなくlang属性、white-space、overflow、text-overflowも合わせて確認します。

対象	主な指定	向く場面	注意点
通常文	`word-break: normal`	本文や説明文	長いURLはあふれる場合がある
英数字の羅列	`overflow-wrap: anywhere`	商品IDやトークン	読みやすさを確認する
長いURL	`overflow-wrap: break-word`	コメント欄や脚注	URLの視認性が下がることがある
緊急回避	`word-break: break-all`	狭いカード	英単語が細かく切れやすい
日本語中心	`word-break: normal`	記事本文	他言語混在時に確認が必要
韓国語や中国語	`word-break: keep-all`	CJKの単語分割抑制	横幅不足に注意する
見出し	`overflow-wrap: anywhere`	長いタイトル	意図しない位置で切れる場合がある
表セル	`min-width: 0`	横並びの表現	親要素の幅制約も見る
Flex子要素	`min-width: 0`	カードUI	指定漏れで折り返せないことがある
Grid子要素	`minmax(0, 1fr)`	レスポンシブデザイン	`1fr`だけでは不足する場合がある
コード表示	`white-space: pre-wrap`	短いコード断片	整形済みテキストの意味を崩さない
省略表示	`text-overflow: ellipsis`	一覧タイトル	`overflow: hidden`などが必要
英語本文	`hyphens: auto`	長文カラム	`lang`が影響する
日本語本文	`line-break: strict`	和文組版	ブラウザ差を確認する
ボタン	`white-space: nowrap`	短いラベル	小画面で幅を圧迫する
タグ一覧	`display: inline-flex`	ラベルUI	折り返し単位を要素にする
引用文	`word-break: normal`	読み物系ページ	URLだけ別指定にする
メールアドレス	`overflow-wrap: anywhere`	連絡先表示	コピー時の見え方を確認する
ナビゲーション	`white-space: nowrap`	横並びメニュー	幅不足時の代替が必要
パンくず	`overflow-wrap: anywhere`	長いカテゴリ名	階層の視認性を保つ
モーダル	`max-width: min()`	小画面の説明	本文幅と折り返しを同時に見る
ツールチップ	`max-inline-size`	補足テキスト	短すぎる幅は避ける
縦書き	`writing-mode`	和風レイアウト	横書きと改行感が異なる
印刷CSS	`@media print`	帳票や資料	ページ分割も見る
CMS本文	`.entry-content`	投稿全体	子要素へ継承する範囲を絞る
コメント欄	`overflow-wrap: anywhere`	ユーザー入力	悪意ある長文対策にもなる
カード本文	`min-width: 0`	横並びカード	画像幅との関係を見る
価格表示	`white-space: nowrap`	数値と単位	折り返さない単位を選ぶ
APIレスポンス	`pre-wrap`	デバッグ表示	長いキー名の扱いを調整する
最終候補	`normal`＋局所指定	保守しやすい設計	全体指定の副作用を避ける

word-breakプロパティの基本

word-breakは強く改行を許すCSS指定で、通常の本文すべてへ無条件に付けるものではありません。初心者がつまずきやすいのは、break-allで横あふれを止める代わりに英単語やURLの読みやすさまで崩す点です。

overflow-wrapは「収まらないときに折る」考え方に近く、本文の自然な流れを残しやすいです。コーディングでは、CSS全体の初期値としてoverflow-wrap: break-wordやoverflow-wrap: anywhereを検討し、局所的にword-breakを足す設計が扱いやすいです。

この違いは、CSSでInline-blockを効果的に使う方法9選で扱う横並び要素にも関係します。横幅が限られる部品ほど、要素幅とCSSの改行規則を合わせて考えます。

word-breakの使い方

word-breakの使い方は、対象テキストの性質から決めると迷いにくくなるのがポイントです。長い英数字、URL、多言語文、引用文、コード断片では読み方が異なるため、同じCSSを全体へ配らずクラスごとに役割を分けますが、これは押さえたい点です。

サンプルコード1：単語の折り返しを制御する

長い単語がコンテナ幅を超えたとき、CSSのbreak-allは文字単位で折り返します。見た目の崩れを止める力は強い一方、英単語の意味のまとまりは壊れやすくなるのが一般的です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.long-word {
  width: 240px;
  border: 1px solid #999;
  padding: 8px;
  word-break: break-all;
}
</style>
</head>
<body>
<p class="long-word">非常に長い単語exampleexampleexampleexampleがここで折り返されますし、これが一つの目安です。</p>
</body>
</html>

結果: 期待される表示では、.long-wordの幅に合わせて長い英数字が途中で改行され、段落が右側へはみ出しにくくなります。

borderとpaddingを加えると、折り返しが起きる幅を目で追いやすくなります。プログラミング学習中は、視覚的な枠を一時的に付けるとCSSの効き方を切り分けやすいです。

サンプルコード2：長いURLの扱い方

URLは自然な空白が少なく、横スクロールの原因になりやすい文字列です。word-break: break-allでも回避できますが、CSSでURLのまとまりを少し残すならoverflow-wrapも候補です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.long-url {
  width: 260px;
  overflow-wrap: anywhere;
  word-break: normal;
}
</style>
</head>
<body>
<p class="long-url">https://www.example.com/articles/css-word-break-responsive-design-sample-page</p>
</body>
</html>

結果: 期待される表示では、長いURLが要素幅に合わせて折り返され、word-break: normalのままでも横にはみ出しを抑えます。

古い解説ではword-wrapという名前が使われることがあります。現在の標準的なCSSプロパティ名はoverflow-wrapで、word-wrapは互換性のために残る別名です。

サンプルコード3：多言語テキストの折り返し

多言語の文章では、英語の単語を途中で割らず、日本語は自然な位置で流したい場面があるのが現実的です。CSSのkeep-allはCJKの分割を抑えますが、横幅が狭いUIでははみ出しも起きやすくなるのが基本です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.multilingual-text {
  width: 280px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
</style>
</head>
<body>
<p class="multilingual-text">This is an English text mixed with 日本語のテキスト。</p>
</body>
</html>

結果: 期待される表示では、英語の単語が細かく分断されにくくなり、収まりきらない文字列は必要に応じて折り返されます。

グローバル向けのウェブ開発では、このCSS設定差が表示に出ますし、ここがポイントです。lang="ja"やlang="en"を適切に付けると、ブラウザが言語に応じた改行やハイフネーションを判断しやすくなります。

サンプルコード4：カスタムスタイルの適用

カスタムUIでは、背景色や余白を付けたボックス内でCSSの折り返しを制御する場面が多いです。background-color、padding、border-radiusを使う部品では、文字の収まりも同じクラスで管理すると分かりやすくなるのが目安です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.custom-style {
  max-width: 300px;
  background-color: #f1f5f9;
  padding: 12px;
  border-radius: 6px;
  overflow-wrap: break-word;
  word-break: normal;
}
</style>
</head>
<body>
<div class="custom-style">こちらのテキストはカスタムスタイルが適用され、longlonglonglongwordを含んでも折り返されますが、これは押さえたい点です。</div>
</body>
</html>

結果: 期待される表示では、装飾されたボックス内に長い文字列が収まり、背景の外へ文字が突き出しにくくなります。

通常文を守るならword-break: normalを残し、あふれる文字列だけoverflow-wrap: break-wordで逃がします。CSSの全体設計では、見た目の指定と可読性の指定を同じクラスに閉じ込めると保守しやすいです。

サンプルコード5：レスポンシブデザインでの利用

レスポンシブデザインでは、PC幅で自然な文がスマートフォン幅で急にあふれることがあると整理できるのがポイントです。CSSの@mediaで画面幅に応じた折り返しを切り替える方法が役立ちます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.responsive-text {
  max-width: 520px;
  overflow-wrap: break-word;
}
@media screen and (max-width: 600px) {
  .responsive-text {
    word-break: break-all;
  }
}
</style>
</head>
<body>
<p class="responsive-text">このテキストは小さい画面でveryveryverylongwordを含んでも折り返されますが、覚えておくと役立つでしょう。</p>
</body>
</html>

結果: 期待される表示では、通常幅では自然な折り返しになり、600px以下の画面では長い文字列がより積極的に折り返されます。

この調整は、CSSグリッド入門！完全マスターの12ステップのようなレイアウト設計ともつながります。GridやFlexで列幅を変える場合、レスポンシブデザインの文字折り返しも同時に確認すると理解できるのが一般的です。

word-breakの詳細なカスタマイズ方法

word-breakの詳細調整では、単体の値だけでなく、親要素の幅、子要素の縮み方、空白の扱いをまとめて見ます。display: flexやdisplay: gridを使うコーディングでは、CSSの文字列指定が正しくても要素が縮めず、あふれることがあります。

💡 Tips: 折り返しが効かないときは、対象要素だけでなく親要素のmin-width、flex-basis、grid-template-columnsも確認すると原因を絞りやすくなると理解できると覚えるとよいでしょう。

サンプルコード6：異なるブラウザ対応の方法

主要ブラウザではword-breakとoverflow-wrapの基本挙動は広く使えるのが現実的です。古い記事や既存CSSにはword-wrapが残る場合があり、保守時は意図を確認してから現行のoverflow-wrapへ寄せます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.cross-browser-text {
  width: 260px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: normal;
}
</style>
</head>
<body>
<p class="cross-browser-text">このテキストは異なるブラウザでもlonglonglonglongwordを折り返す想定です。</p>
</body>
</html>

結果: 期待される表示では、互換性を考慮した指定により、長い文字列がコンテナ幅を超えたときに折り返されます。

word-wrapは標準名ではなく、互換用の別名として読みます。新しく書くCSSではoverflow-wrapを中心にし、古いブラウザ対応が必要な場合だけ併記を検討すると考えられますし、これが一つの目安です。

サンプルコード7：複合的なCSSルールの設定

複合指定では、CSSのword-break、overflow-wrap、hyphensの役割を重ねます。英語本文ならhyphens: autoが読みやすい分割を助ける場合がありますが、言語辞書やlang属性の影響を受けます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.complex-text {
  width: 260px;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
</style>
</head>
<body>
<p class="complex-text">This complex style uses internationalization and extraordinarilylongwords in a narrow layout.</p>
</body>
</html>

結果: 期待される表示では、長い英単語が必要に応じて折り返され、対応環境ではハイフネーションも適用される可能性があります。

公式ドキュメントのMDNのhyphens解説は、単語の折り返し時にハイフンをどう扱うかを説明しています。CSSで英語長文を整える場合、lang="en"、hyphens、overflow-wrapを一緒に見ますし、これが一つの目安です。

⚠️ 注意: word-break: break-wordは互換目的で見かける値ですが、新しいコーディングではoverflow-wrap側の指定に寄せるほうが仕様を読みやすくなると整理できます。

この調整は、CSSを使った引用デザインの作成とカスタマイズ方法7選で扱う引用ボックスにも関係します。引用文では文章の自然な区切りを守り、URLやコードだけ別クラスで折り返すと読みやすくなると言えるでしょう。

word-breakを使ったよくあるエラーと対処法

word-breakのエラーは、文法ミスよりも期待と違う位置で改行される表示上の問題として現れます。初心者がつまずきやすいのは、CSSの折り返しを強くしすぎる問題と、親要素の幅制約で折り返しが効かない問題です。

中途半端な位置で折り返される場合

代表例は、通常の英文や商品名にbreak-allを広く適用したケースです。文字単位で切れるため横幅は守れますが、単語の意味が追いづらくなると理解できます。

対処として、通常文はword-break: normalに戻し、長いURLやIDにだけoverflow-wrap: anywhereを当てますが、覚えておくと役立つでしょう。CSSを分けることで、読みやすさとレイアウト維持の両方を狙えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.break-word {
  width: 280px;
  word-break: normal;
  overflow-wrap: anywhere;
}
</style>
</head>
<body>
<p class="break-word">この非常に長いURLhttps://www.verylongurl.com/thisisaverylongurlは必要に応じて折り返されます。</p>
</body>
</html>

結果: 期待される表示では、通常文の分割を抑えつつ、長いURL部分が要素幅に合わせて折り返されますが、これは押さえたい点です。

西洋言語が不適切に折り返される場合

西洋言語の単語が不自然に割れる場合は、break-allのCSS指定範囲が広すぎる可能性があるのが基本です。多言語サイトのプログラミングでは、本文クラスと例外クラスを分け、言語ごとの読み方を壊さないようにすると覚えるとよいでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.multilingual {
  width: 300px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
</style>
</head>
<body>
<p class="multilingual">This is English text これは日本語のテキストです mixed together.</p>
</body>
</html>

結果: 期待される表示では、英語の単語が細切れになりにくく、日本語を含む文章も幅に応じて折り返されます。

keep-allは万能ではありません。幅が極端に狭いカードや表セルでは、overflow-wrapやmin-width: 0を併用し、最終的な見た目をブラウザで確認するのが目安です。

ℹ️ 補足: Flexbox内で文字が折り返されない場合、子要素にmin-width: 0を入れると、テキストが縮める領域を得られる場合があると考えられます。

この考え方は、CSSにおけるquerySelector()の活用法10選！初心者からプロまで役立つCSSガイドのようにJavaScriptでクラスを付け替える場面にも関係すると考えられます。classList.addやclassList.removeでCSSの折り返し用クラスを切り替える設計も可能です。

word-breakの応用例

word-breakの応用では、記事本文、レポート、ニュース、ブログ、管理画面など、コンテンツの性質に合わせて指定を変えますし、ここを基本と考えるとよいでしょう。ウェブ開発では入力される文字列が運用後に変わるため、ユーザー入力やCMS本文には余裕を持ったCSSの折り返し設計が必要です。

サンプルコード8：レポートレイアウトの作成

レポートや帳票では、長い数値、識別子、専門用語が連続しやすくなります。表や段落の幅が固定される場合、CSSで制御できないあふれが隣の列へ重なると情報を読み違える原因になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.report-text {
  width: 300px;
  word-break: break-all;
}
</style>
</head>
<body>
<p class="report-text">このレポートでは、長い数字12345678901234567890や単語supercalifragilisticexpialidociousが折り返されますし、ここがポイントです。</p>
</body>
</html>

結果: 期待される表示では、長い数字や英単語が段落内で折り返され、指定幅の外へ伸びにくくなるのが基本です。

この用途では、厳密な読みやすさよりレイアウトの破綻防止を優先する場面があります。請求番号や注文番号をコピーするUIなら、折り返し後も選択しやすい余白と行間を確保します。

サンプルコード9：ニュースサイトのレイアウト調整

ニュースサイトやブログのカードでは、見出し、本文抜粋、カテゴリ名が狭い領域に入りますが、これは押さえたい点です。PCでは自然なCSS折り返し、小画面では強めの折り返しという切り替えが有効な場合があると言えるでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.news-text {
  max-width: 480px;
  overflow-wrap: break-word;
  word-break: normal;
}
@media screen and (max-width: 600px) {
  .news-text {
    word-break: break-all;
  }
}
</style>
</head>
<body>
<p class="news-text">このニュース記事のテキストは、異なるデバイスの画面サイズに応じて適切に折り返されます。</p>
</body>
</html>

結果: 期待される表示では、広い画面では自然な改行になり、狭い画面では文字列がより細かく折り返されますが、覚えておくと役立つでしょう。

レスポンシブデザインでは、max-widthだけでなくfont-sizeやline-heightも同時に調整するのがポイントです。文字が折り返されても行間が詰まりすぎると読みにくいため、本文はCSSのline-height: 1.6前後を起点に整えます。

サンプルコード10：ブログポストのスタイル調整

ブログポストでは、引用文とコード断片を同じCSSの折り返し規則で扱うと不自然です。引用文は文章のまとまりを守り、コードは横スクロールや折り返しの方針を分けますが、覚えておくと役立つでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.blog-quote {
  word-break: normal;
  overflow-wrap: break-word;
}
.blog-code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
</style>
</head>
<body>
<blockquote class="blog-quote">これは、適切に折り返されるべき長い引用文です。</blockquote>
<pre class="blog-code">LongCodeSnippetWithoutAnySpaces()</pre>
</body>
</html>

結果: 期待される表示では、引用文は自然な文章として折り返され、コード断片は狭い幅でも途中で折り返されます。

長いコードを折り返すと、インデントや構造が読みにくくなる場合があります。技術記事のコーディング例では、短い断片はpre-wrap、長いソースは横スクロールと使い分けますし、これが一つの目安です。

💡 Tips: 管理画面や投稿本文でユーザー入力を扱う場合、.entry-content全体へ強いbreak-allを入れるより、URLやコードなど問題が出やすい要素へ限定するほうが副作用を抑えられますし、ここを基本と考えるとよいでしょう。

この実装は、ゲージ作成の完全ガイド！7ステップで完全理解で扱う部品型UIにも応用できるのが基本です。ラベル内の数値や説明文が長くなる場合、部品単位でCSSの折り返し規則を持たせます。

エンジニアなら知っておくべきword-breakの豆知識

CSSの文字折り返しは、見た目だけでなく、言語、入力データ、レイアウト方式が重なる領域です。保守しやすくするには、仕様名、互換名、似たプロパティの差を短く説明できる状態にしておきますが、覚えておくと役立つでしょう。

歴史的背景と発展

ウェブページの多言語化とスマートフォン閲覧の増加で、CSSの折り返し制御の必要性は高まりました。長いURL、SNSのユーザー名、APIキー風の文字列など、空白を含まないデータは通常の文章よりレイアウトを壊しやすいです。

CSS Text系の仕様では、word-break、overflow-wrap、line-break、hyphensが役割を分けています。初心者の段階では、あふれ対策はoverflow-wrap、文字単位の強い改行はword-breakと覚えるとよいです。

word-breakと関連プロパティ

overflow-wrapは折り返せない文字列のあふれ対策、hyphensは英単語などのハイフネーション、white-spaceは空白や改行の扱いを制御するのが目安です。同じ問題に見えても、CSS上の責務は異なるのが一般的です。

word-break: normalは、言語ごとの標準的な改行規則に任せます。
word-break: break-allは、文字単位の強い折り返しで横あふれを抑えます。
word-break: keep-allは、CJKテキストの分割を抑える方向で働きますし、ここがポイントです。
overflow-wrap: anywhereは、収まらない文字列へ追加の改行機会を与えますし、ここを基本と考えるとよいでしょう。
hyphens: autoは、言語に応じたハイフネーションを試みますし、ここを基本と考えるとよいでしょう。

text-overflow: ellipsisは折り返しではなく省略表示の指定です。white-space: nowrap、overflow: hiddenと組み合わせて一行で省略するため、本文を読み切らせたい場面とは目的が違います。

プログラミング時の判断は、全文を読ませるなら折り返し、一覧で短く見せるなら省略、固定ラベルなら折り返さない、というようにUIの目的からCSSを選びますし、ここがポイントです。

まとめ

CSSのword-breakは、長い文字列や多言語テキストがレイアウトを壊さないように改行位置を調整するプロパティです。基本はnormalを起点にし、強い分割が必要な場面でbreak-all、CJKの分割を抑えたい場面でkeep-allを検討します。

通常文すべてにbreak-allを入れると、英単語やURLの読みやすさが崩れる場合があるのがポイントです。ウェブ開発ではoverflow-wrap、hyphens、white-space、min-widthを合わせて見ながら、対象ごとにCSS指定を分けますが、これは押さえたい点です。

初心者のコーディングでは、横にはみ出した要素へすぐ強いCSS指定を入れず、親要素の幅、FlexやGridの縮み方、レスポンシブデザインでの画面幅を順に確認します。これらを押さえると、CSSのテキスト制御を再利用しやすい設計として扱えます。

著者: Japanシーモア編集部

Japanシーモアは、Web/IoT/APP/SYS 分野のプログラミング情報を体系的に提供するメディアです。本記事は編集部による執筆とAI支援を組み合わせて制作し、公開前に編集部が校正しています。誤りや改善案がございましたらお問い合わせよりご連絡ください。

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。