セル内の長い英単語が改行されず、セルの幅やテーブルの幅がが意図した幅より広くなってしまう - CSS

セル内の長い英単語が改行されず、テーブルの幅がが意図した幅より広くなってしまう現象について紹介します。

概要

テーブルでセル内に、長い英単語がある場合、改行がされずにセルの幅が設定した幅より広くなり、テーブルの幅も意図した幅より広くなってしまいます。

現象の確認

現象を確認します。

コード

下記のHTML、CSSファイルを作成します。

CssTableWordBreak.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="CssTableWordBreak.css" />
</head>
<body>
  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>

    <tr>
      <td class="id">1</td>
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">テストのタイトル1</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">240</td>
      <td class="memo"></td>
    </tr>
    <tr>
      <td class="id">3</td>
      <td class="title">テストのタイトル2</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">420</td>
      <td class="memo"></td>
    </tr>
  </table>

  <hr />

  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>
    <tr>
      <td class="id">1</tdclass="id">
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">28506800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">3</td>
      <td class="title">さらにさらにとんでもなく、とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">さらにさらに素晴らしく長く、とてつもない長さで、とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>
  </table>
  <br />
  <hr />
  <br />

  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>
    <tr>
      <td class="id">1</tdclass="id">
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">28506800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">3</td>
      <td class="title">さらにさらにとんでもなく、とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">さらにさらに素晴らしく長く、とてつもない長さで、とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">4</td>
      <td class="title">TITLE_ABCDEFGHIJKLMNOPQRSTUVWXYZ_ABCDEFGHIJKLMNOPQRSTUVWXYZ_ABCDEFGHIJKLMNOPQRSTUVWXYZ_ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
      <td class="category">CATEGORY_ABCDEFGHIJKLMNOPQRSTUVWXYZ_ABCDEFGHIJKLMNOPQRSTUVWXYZ_ABCDEFGHIJKLMNOPQRSTUVWXYZ_ABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>
  </table>
</body>
</html>

CssTableWordBreak.css

table.Table1 {
  width: 100%;
  border-collapse: collapse;
}

  table.Table1 thead tr th.id {
    width: 96px;
  }
  table.Table1 thead tr th.title {
  }
  table.Table1 thead tr th.category {
    width: 180px;
  }
  table.Table1 thead tr th.value {
    width: 96px;
  }
  table.Table1 thead tr th.memo {
    width: 32px;
  }

  table.Table1 tr td {
    border-bottom: 1px solid #808080;
  }

    table.Table1 tr td.id {
      width: 96px;
      background-color: #d9f5ff;
    }

    table.Table1 tr td.title {
      background-color: #aeeaff;
    }

    table.Table1 tr td.category {
      width: 180px;
      background-color: #b1daff;
    }

    table.Table1 tr td.value {
      width: 96px;
      background-color: #b3caff;
    }

    table.Table1 tr td.memo {
      width: 32px;
      background-color: #b1b9ff;
    }

解説

Tableタグを利用した表をページに表示します。表は3つあり、1つ目の表はセル内のテキストが短いもの、2つ目の表はセル内のテキストが長いですが日本語で記述されているもの、 3つ目の表はセル内のテキストがスペースや"-"が無く、1単語で長いものとなっています。
CSSではセルの背景色を指定しています。また、1列目、3列目、4列目、5列目のセル幅を固定して設定しています。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
上の2つの表はページの幅に合わせて表示されていますが、3つ目の表は2列目の英単語が改行されず、ページの幅より表の幅が広くなり、横スクロールバーが表示されています。

Webブラウザのウィンドウ幅を狭めると、上2つの表はセル内でワードラップが動作し、2列目の幅が狭まり、ページの幅に合わせて表の幅も縮まりますが、3つ目の表はセル内のワードラップが動作しないため、票の幅も変わらないです。

原因

長い英単語の場合、途中でワードラップされない処理が入るため、改行されず、横幅が広がってしまうことが原因です。 HTMLのブロック要素でも似た症状が発生します。(詳細はこちらの記事を参照してください。)

対処法

CSSファイルを下記のコードに変更します。

CssTableWordBreak.css (修正版)

table.Table1 {
  width: 100%;
  border-collapse: collapse;
}

  table.Table1 thead tr th.id {
    width: 96px;
  }
  table.Table1 thead tr th.title {
  }
  table.Table1 thead tr th.category {
    width: 180px;
  }
  table.Table1 thead tr th.value {
    width: 96px;
  }
  table.Table1 thead tr th.memo {
    width: 32px;
  }

  table.Table1 tr td {
    border-bottom: 1px solid #808080;
  }

    table.Table1 tr td.id {
      width: 96px;
      background-color: #d9f5ff;
    }

    table.Table1 tr td.title {
      background-color: #aeeaff;
      word-break:break-word;
    }

    table.Table1 tr td.category {
      width: 180px;
      background-color: #b1daff;
      word-break: break-word;
    }

    table.Table1 tr td.value {
      width: 96px;
      background-color: #b3caff;
    }

    table.Table1 tr td.memo {
      width: 32px;
      background-color: #b1b9ff;
    }

解説

確実に改行させたいセル(tdタグ)に、word-wrap: break-word; を設定します。

  word-break: break-word;

表示結果

CSS変更後のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。2列目の英語の文字列が改行され、表の幅がページの幅に合わせて表示されています。

Webブラウザのウィンドウ幅を狭めると、表の幅も合わせて縮まります。長い英単語でも途中で改行されており、セルの幅が広がらないです。

補足 (word-wrap プロパティのみを指定した場合)

word-wrap: break-word; のみを指定した場合は単語の途中で改行されないため注意が必要です。 word-wrapプロパティはInternet Explorer 専用のプロパティのため、Internet Explorer ではワードラップ処理されますが、 Microsoft Edge や Google Chromeでは設定が反映されません。
Internet Explorer, Microsoft Edge, Google Chrome で改行されるようにする場合は、改行させたいセル(tdタグ)に、word-wrap: break-word; と word-wrap: break-word; を設定します。

  word-break: break-word;
  word-wrap: break-word;

CssTableWordBreak.css (修正版)

table.Table1 {
  width: 100%;
  border-collapse: collapse;
}

  table.Table1 thead tr th.id {
    width: 96px;
  }
  table.Table1 thead tr th.title {
  }
  table.Table1 thead tr th.category {
    width: 180px;
  }
  table.Table1 thead tr th.value {
    width: 96px;
  }
  table.Table1 thead tr th.memo {
    width: 32px;
  }

  table.Table1 tr td {
    border-bottom: 1px solid #808080;
  }

    table.Table1 tr td.id {
      width: 96px;
      background-color: #d9f5ff;
    }

    table.Table1 tr td.title {
      background-color: #aeeaff;
      word-wrap: break-word;
    }

    table.Table1 tr td.category {
      width: 180px;
      background-color: #b1daff;
      word-wrap: break-word;
    }

    table.Table1 tr td.value {
      width: 96px;
      background-color: #b3caff;
    }

    table.Table1 tr td.memo {
      width: 32px;
      background-color: #b1b9ff;
    }

上記の修正版CSSに置き換えてHTMLファイルを表示した場合、下図の表示になります。 2列目の文字列は改行されないことが確認できます。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

セル内の長い英単語が改行されず、セルの幅やテーブルの幅がが意図した幅より広くなってしまう - CSS

概要

現象の確認

コード

解説

表示結果

原因

対処法

解説

表示結果

補足 (word-wrap プロパティのみを指定した場合)

関連するページ