【CSS】テーブル(表)から文字がはみ出す・折り返されない時の対処法【word-break: break-all】

コーディング

2021.03.25

テーブル(表)から文字がはみ出す
word-break: break-allで改行を許可させる
レスポンシブでtableのレイアウトを維持する

テーブル(表)から文字がはみ出す

テーブルで表を作った時にこんなことに・・・

メールアドレスが長いことでテーブルもバランスがおかしくなっています。
widthで幅を付けても動きません。

HTMLはこんな感じです。

<table>
    <tbody>
    <tr>
        <td>メールアドレス</td>
        <td>meruadoresumeruadoresueruadoresueruadoresu@gmail.com</td>
    </tr>
    <tr>
        <td>電話番号</td>
        <td>000-0000-0000</td>
    </tr>
    </tbody>
</table>

<table>

<tbody>

<tr>

<td>メールアドレス</td>

<td>meruadoresumeruadoresueruadoresueruadoresu@gmail.com</td>

</tr>

<tr>

</tr>

</tbody>

</table>

これはもともとの仕様で、英文が意図せぬ部分で変な改行をしないために、ざっくり言うと「スペースや – や . , の記号が入っていないところには改行させない」というものです。

word-break: break-allで改行を許可させる

「スペースや記号が入っていないところには改行させない」ルールを突破するにはword-break: break-allをつければOKです。

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

table td {

word-break: break-all;

}

これで英文(メールアドレス)が自動的に改行されるようになりました。
widthで幅も自由に指定することができます。

レスポンシブでtableのレイアウトを維持する

tableにtable-layout: fixedで、widthで指定した値で固定して表示できます。
さらにwidth: 100%ではみ出させないようにします。

table {
    word-break: break-all;
    table-layout: fixed;
    width: 100%;
}

table {

word-break: break-all;

table-layout: fixed;

width: 100%;

}

これでだいたいOKだと思います。
あとは必要に応じてborder-collapse: collapseや　border-spacing: 0でデザインを整えると完成です。