【CSS完全ガイド】表内で改行されない文字を制御する方法｜white-space・word-break・overflow-wrap

この記事で学べること

• テーブルセル内で改行が起きる・起きない仕組み
• white-space / word-break / overflow-wrap の違いと使い分け
• table-layout: fixed と auto の挙動の違い
• text-overflow で省略表示する方法
• CSS Hyphens でハイフネーションを制御する方法
• レスポンシブ対応のベストプラクティス
• 実務で頻出する7つのパターンと解決法
• よくあるトラブルと原因・対処法

注意：URLの改行挙動はブラウザごとに異なります。Chromeではスラッシュ（/）の後ろが改行ポイントになることがありますが、Firefoxでは改行されないケースがあります。クロスブラウザで統一した挙動を得るには、CSSで明示的に制御する必要があります。

<table>
  <tr>
    <td>ユーザー名</td>
    <td>https://example.com/api/v2/users/profile/settings</td>
  </tr>
</table>
/* URL列が極端に広がり、ユーザー名列が潰される */

td.nowrap {
  white-space: nowrap;
}

注意：nowrap を使うと、セル内容がテーブルの幅を超えてはみ出す可能性があります。必ず overflow や text-overflow と組み合わせるか、セル内容が短いことが保証されている場合にのみ使いましょう。

td.code-cell {
  white-space: pre-wrap;
  font-family: monospace;
}

td.address {
  white-space: pre-line;
}

/* Chrome DevTools でセルを選択し、Computed タブで確認 */
/* 1. F12でDevToolsを開く */
/* 2. 対象のセルを右クリック → 検証 */
/* 3. Computed タブで white-space を検索 */
/* 4. 現在の値と、どのCSSルールから来ているかを確認 */

td.break-all {
  word-break: break-all;
}

/* 適用例 */
<td class="break-all">
  https://example.com/very/long/path/to/resource?param=value
</td>
/* → セル幅に合わせて任意の位置で改行される */

注意：break-all は英語の通常の文章にも適用されるため、「inter」と「national」のように意味のある分割点を無視して途中で切れてしまいます。英語の文章が混在するセルには使わないようにしましょう。

td.keep-all {
  word-break: keep-all;
}

/* 適用前: 「東京都渋谷区」→「東京都渋」で改行される可能性あり */
/* 適用後: 「東京都渋谷区」は1行で表示 */

/* テキスト: "This is an internationalization example" */

/* word-break: break-all の場合 */
/* → "This is an internatio"  */
/*    "nalization example"    (単語の途中で切れる) */

/* overflow-wrap: break-word の場合 */
/* → "This is an"             */
/*    "internationalization"  (単語の手前で改行) */
/*    "example"               */

ポイント：実務では、まず overflow-wrap: break-word を試し、それでもレイアウトが崩れる場合にのみ word-break: break-all を検討するのがベストプラクティスです。break-all は強力ですが、英語の文章の可読性を損なう副作用があります。

td {
  overflow-wrap: break-word;
}

/* 旧プロパティ名（IE互換が必要な場合） */
td {
  word-wrap: break-word;       /* 旧名 */
  overflow-wrap: break-word;  /* 現在の標準 */
}

ポイント：word-wrap は overflow-wrap の旧名称です。現在のCSS仕様では overflow-wrap が正式名ですが、後方互換性のために word-wrap も引き続きサポートされています。両方書いておくのが最も安全です。

/* break-word の場合 */
td {
  overflow-wrap: break-word;
  /* min-content = 改行不可能な最長文字列の幅 */
  /* → テーブル列幅の計算では長い文字列の幅が使われる */
}

/* anywhere の場合 */
td {
  overflow-wrap: anywhere;
  /* min-content = 1文字の幅（最小可能幅） */
  /* → テーブル列幅の計算でも柔軟になる */
}

/* NG: table-layout: auto では効果が限定的 */
table {
  width: 100%;
  /* table-layout: auto (デフォルト) */
}
td {
  overflow-wrap: break-word;
  /* → 列幅計算で長い文字列の幅が考慮されるため、効果が薄い */
}

/* OK: table-layout: fixed と組み合わせる */
table {
  width: 100%;
  table-layout: fixed;
}
td {
  overflow-wrap: break-word;
  /* → 列幅が先に確定するため、はみ出す文字列が正しく折り返される */
}

<table style="width: 100%">
  <tr>
    <td>ID</td>
    <td>名前</td>
    <td>e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855</td>
  </tr>
</table>
/* → ハッシュ列が80%以上の幅を占め、IDと名前が極端に狭くなる */

table {
  table-layout: fixed;
  width: 100%;
}

/* 列幅を個別に指定する場合 */
<table>
  <colgroup>
    <col style="width: 80px">    <!-- ID列 -->
    <col style="width: 150px">   <!-- 名前列 -->
    <col>                         <!-- 残りの幅 -->
  </colgroup>
  ...
</table>

table.stable-layout {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

table.stable-layout td {
  overflow-wrap: break-word;
  word-wrap: break-word;  /* 後方互換 */
  padding: 8px 12px;
}

ポイント：table-layout: fixed を使う際は、必ず width（通常は100%）を指定してください。width がないと fixed が正しく動作しません。これは非常に多いミスです。

td.ellipsis {
  white-space: nowrap;        /* 1. 改行を禁止 */
  overflow: hidden;           /* 2. はみ出しを隠す */
  text-overflow: ellipsis;   /* 3. 省略記号を表示 */
}

table.truncate-table {
  table-layout: fixed;    /* 必須！ */
  width: 100%;
  border-collapse: collapse;
}

table.truncate-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 12px;
}

/* 特定の列だけ省略表示にする場合 */
table.truncate-table td:nth-child(3) {
  max-width: 200px;  /* 必要に応じて最大幅を指定 */
}

<td
  class="ellipsis"
  title="https://example.com/very/long/path/to/api/v2/users"
>
  https://example.com/very/long/path/to/api/v2/users
</td>
<!-- ホバーすると全文がツールチップで表示される -->

ポイント：title属性のツールチップはマウスホバーでしか表示されないため、モバイルデバイスでは利用できません。モバイル対応が必要な場合は、タップで展開するUIや、レスポンシブ時に省略を解除するメディアクエリを検討しましょう。

td.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;       /* 2行まで表示 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap は指定しない（複数行なので） */
}

注意：-webkit-line-clamp はベンダープレフィックス付きですが、2026年現在、Chrome、Firefox、Safari、Edgeの全主要ブラウザで動作します。ただし、テーブルセルでは display プロパティの変更がレイアウトに影響を与える可能性があるため、十分にテストしてください。

td.hyphenate {
  hyphens: auto;
  -webkit-hyphens: auto;  /* Safari対応 */
}

/* 重要: lang属性が必要 */
<html lang="ja">
/* または */
<td lang="en" class="hyphenate">internationalization</td>

注意：hyphens: auto が正しく動作するには、HTML要素にlang属性が設定されている必要があります。ブラウザは言語辞書を使って適切な分割位置を判断するため、lang属性がないとハイフネーションが機能しません。

<td>
  Sup&shy;port&shy;ed Brow&shy;sers
</td>

<!-- 幅が十分な場合: "Supported Browsers" と表示 -->
<!-- 幅が狭い場合:   "Sup-"                       -->
<!--                  "ported Brow-"               -->
<!--                  "sers"         と表示        -->

ポイント：hyphens は word-break や overflow-wrap と組み合わせて使えます。例えば overflow-wrap: break-word で基本的な折り返しを確保し、hyphens: auto でさらに美しい改行を実現する、という使い方が可能です。

<!-- URLを区切り文字の後ろで改行可能にする -->
<td>
  https://example.com<wbr>/api<wbr>/v2<wbr>/users<wbr>/profile<wbr>/settings
</td>

<!-- ファイルパスの区切りで改行可能にする -->
<td>
  /usr<wbr>/local<wbr>/lib<wbr>/node_modules<wbr>/package
</td>

<td>
  田中太郎<br>
  <small>tanaka@example.com</small>
</td>

<!-- ハッシュ値を8文字ごとに改行可能にする -->
<td>
  e3b0c442&#8203;98fc1c14&#8203;9afbf4c8&#8203;996fb924
</td>

注意：ゼロ幅スペースはテキストをコピーしたときにも含まれます。ユーザーがセルのテキスト（URLやコード）をコピーして使う可能性がある場合は、コピー時に問題が起きないか注意が必要です。URLにゼロ幅スペースが混入するとリンクが壊れます。

<!-- 数値と単位を分離させない -->
<td>100&nbsp;MB</td>

<!-- 日付の途中で改行させない -->
<td>2026年&nbsp;3月&nbsp;6日</td>

<!-- 人名を分離させない -->
<td>John&nbsp;Doe</td>

/* デスクトップ: 省略表示 */
table {
  table-layout: fixed;
  width: 100%;
}

td.url-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* モバイル: 折り返し表示に切り替え */
@media (max-width: 768px) {
  td.url-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    word-break: break-all;
  }
}

/* テーブルをラッパーで囲む */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
}

.table-wrapper table {
  min-width: 600px;  /* テーブルの最小幅 */
}

/* スクロールヒントの表示 */
@media (max-width: 600px) {
  .table-wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.1));
    pointer-events: none;
  }
}

<div class="table-wrapper">
  <table>
    ...
  </table>
</div>

@media (max-width: 600px) {
  table.responsive-card,
  table.responsive-card thead,
  table.responsive-card tbody,
  table.responsive-card tr,
  table.responsive-card td {
    display: block;
  }

  table.responsive-card thead {
    display: none;  /* ヘッダーを非表示 */
  }

  table.responsive-card tr {
    margin-bottom: 1em;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
  }

  table.responsive-card td {
    padding: 4px 0;
    overflow-wrap: break-word;
    word-break: break-all;
  }

  /* data-label属性でヘッダー名を表示 */
  table.responsive-card td::before {
    content: attr(data-label);
    font-weight: 700;
    display: block;
    color: #64748b;
    font-size: 12px;
  }
}

table {
  table-layout: fixed;
  width: 100%;
}

td.url {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

ポイント：URL列には word-break: break-all を使います。URLは英語の文章ではないため、任意の位置での改行が最も適切です。

td.date,
td.price {
  white-space: nowrap;
  text-align: right;  /* 金額は右寄せが慣習 */
}

/* 列幅を固定する場合 */
col.date-col { width: 120px; }
col.price-col { width: 100px; }

/* CSS */
table.admin-list {
  table-layout: fixed;
  width: 100%;
}

table.admin-list td.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* HTML */
<td class="title"
    title="WordPressの投稿タイトルが非常に長い場合の表示テスト">
  WordPressの投稿タイトルが非常に長い場合の表示テスト
</td>

td.code {
  font-family: "Consolas", "Courier New", monospace;
  white-space: nowrap;
  font-size: 13px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
}

/* コードが長い場合はスクロールを許可 */
td.code-scroll {
  max-width: 250px;
  overflow-x: auto;
}

/* 方法A: 省略表示 + ツールチップ */
td.hash {
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* 方法B: 折り返し表示 */
td.hash-wrap {
  font-family: monospace;
  word-break: break-all;
  font-size: 12px;
}

td.mixed-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* word-break: break-all は使わない！ */
  /* → 日本語部分の改行が不自然になるため */
}

/* セル内のURLだけを制御する場合 */
td.mixed-content a,
td.mixed-content code {
  word-break: break-all;
}

ポイント：混在テキストでは、セル全体に word-break: break-all を適用するのではなく、URL部分（<a>タグ）やコード部分（<code>タグ）にだけ break-all を適用するのが正しいアプローチです。

/* CSSで折り返しを許可 */
td.email {
  overflow-wrap: break-word;
  word-break: break-all;
}

/* または、HTMLで@の後ろに改行ポイントを入れる */
<td>very-long-username@<wbr>example.com</td>

code {
  font-family: monospace;
  /* white-space は明示的に指定されていないが、
     親要素の値を継承する */
}

/* テーマが適用しているスタイル */
.entry-content code {
  white-space: nowrap;
  background: #f5f5f5;
  padding: 2px 6px;
}

/* このため、テーブルセル内の長いコードが改行されない */
<td><code>background-color: rgba(255, 255, 255, 0.5)</code></td>
/* → 1行で表示され、セルが極端に広がる */

/* 方法A: テーブル内のcodeは改行を許可する */
td code {
  white-space: normal;
  word-break: break-all;
}

/* 方法B: 短いコードは1行、長いコードは折り返し */
td code {
  white-space: pre-wrap;
  word-break: break-all;
}

/* 方法C: 短いコードのみ改行禁止 */
td code.nowrap {
  white-space: nowrap;
}
td code.wrap {
  white-space: pre-wrap;
  word-break: break-all;
}

ポイント：テーブル内のcode要素には pre-wrap を使うのが実務的なベストプラクティスです。空白とインデントを保持しつつ、セル幅に応じた折り返しも許可できます。

/* ベーススタイル */
.data-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

/* 全セル共通 */
.data-table td {
  padding: 8px 12px;
  vertical-align: top;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 改行禁止列 */
.data-table td.no-wrap {
  white-space: nowrap;
}

/* 強制改行列（URL、ハッシュ等） */
.data-table td.force-wrap {
  word-break: break-all;
}

/* 省略表示列 */
.data-table td.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* コード列 */
.data-table td.code {
  font-family: monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-all;
}

.api-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

/* エンドポイント列: 折り返し */
.api-table td.endpoint {
  font-family: monospace;
  word-break: break-all;
  font-size: 13px;
  color: #0369a1;
}

/* メソッド列: 改行禁止 */
.api-table td.method {
  white-space: nowrap;
  font-weight: 700;
  text-transform: uppercase;
}

/* 説明列: 通常の改行 */
.api-table td.description {
  overflow-wrap: break-word;
}

/* ラッパー */
.responsive-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* テーブル本体 */
.responsive-table-wrapper table {
  table-layout: fixed;
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.responsive-table-wrapper td {
  padding: 8px 12px;
  overflow-wrap: break-word;
}

/* スクロールが必要なときの視覚的ヒント */
@media (max-width: 640px) {
  .responsive-table-wrapper {
    position: relative;
  }
  .responsive-table-wrapper::after {
    content: "→ スクロール";
    display: block;
    text-align: right;
    font-size: 12px;
    color: #94a3b8;
    padding: 4px 0;
  }
}

ポイント：実務では、パターンAの「汎用データテーブル」をベースに、列ごとに必要なクラスを付与するアプローチが最も管理しやすいです。すべてのセルに同じ改行ルールを適用するのではなく、データの種類に応じて列単位で制御しましょう。

/* NG */
table { width: 100%; }
td { overflow-wrap: break-word; }

/* OK */
table {
  width: 100%;
  table-layout: fixed;  /* これを追加 */
}
td { overflow-wrap: break-word; }

td {
  /* 全ブラウザで確実に動作する組み合わせ */
  overflow-wrap: break-word;
  word-wrap: break-word;    /* 旧ブラウザ対応 */
  word-break: break-word;   /* Chrome/Safari向け（非標準だが効果あり） */
  -ms-word-break: break-all; /* IE対応（必要な場合のみ） */
}

/* テーマのスタイル（詳細度: 0,0,2,1） */
.entry-content table td {
  white-space: nowrap;
}

/* 自分のスタイル: より具体的なセレクタを使う（詳細度: 0,0,3,1） */
.entry-content table.my-table td {
  white-space: normal;
  overflow-wrap: break-word;
}

注意：!important は最終手段です。使うとメンテナンス性が大幅に低下するため、まずはセレクタの詳細度を上げることで対処しましょう。CSSの読み込み順序（子テーマのstyle.cssが後に読み込まれる）も活用できます。

<!-- colgroup で列幅を指定 -->
<table class="data-table">
  <colgroup>
    <col style="width: 60px;">     <!-- ID -->
    <col style="width: 25%;">      <!-- 名前 -->
    <col>                            <!-- URL（残り幅） -->
    <col style="width: 100px;">    <!-- 日付 -->
  </colgroup>
  ...
</table>

/* グリッドアイテムとしてのテーブルラッパー */
.grid-container {
  display: grid;
}

.table-wrapper {
  min-width: 0;     /* これが重要！ */
  overflow: hidden;  /* または overflow-x: auto */
}

/* フレックスアイテムの場合も同様 */
.flex-container {
  display: flex;
}

.flex-container .table-wrapper {
  min-width: 0;     /* min-width: auto を上書き */
}

ポイント：min-width: 0 はグリッド・フレックスレイアウト内でのオーバーフロー問題を解決する最も重要なテクニックの一つです。テーブルに限らず、長いテキストやコードがはみ出す場合に有効です。

この記事のまとめ

• 改行の仕組み：ブラウザは「改行可能ポイント」を探して折り返す。英数字の連続やURLには改行可能ポイントがないため、セルを押し広げる
• white-space：改行の有無を制御する最も基本的なプロパティ。nowrap で改行禁止、pre-wrap で空白保持+折り返し
• word-break：単語途中での分割を制御。break-all は強力だが英文の可読性を損なう。URLやハッシュ値に限定して使う
• overflow-wrap：はみ出し時のみ改行。break-word が最も汎用的な選択肢。table-layout: fixed と組み合わせる
• table-layout：fixed にすることで、overflow-wrap や text-overflow が正しく動作する。改行制御が必要なテーブルでは fixed を選ぶ
• text-overflow：省略記号（…）で切り詰め。3点セット（nowrap + hidden + ellipsis）を忘れない
• hyphens：英語テキストのハイフネーション。lang属性が必須
• HTML手法：<wbr>、&shy;、ゼロ幅スペースで細かい改行位置を制御
• レスポンシブ：メディアクエリでの切り替え、横スクロール、カード型変換の3パターン
• 実務のコツ：すべてのセルに同じルールを適用するのではなく、列ごとにデータの性質に応じた改行ルールを設計する