【CSS】スマホの画面でテーブル（表）からテキストがはみ出す時の対処法

記事で表を使う時に、PCではきちんと表示されているのにスマホで確認したら表から文字がはみ出ているケースがあります。

ワードプレスのテーマがはじめからレスポンシブに対応している場合、テーブルCSSも最適化されているかも知れませんが、そうでない場合は手動で修正することができます。

例えば下のようなHTMLで表を作成したとします。

 
作成した表。

 
この表にテキストを入力してみます。

 
パソコンで見るとテキストがおさまっているように見えますが、スマホの画面幅で見るとどうでしょう？

このようにテキストが表からはみ出して非常に見づらくなっています。

理解しておくべきCSSプロパティ

表からはみ出すテキストの対処方法で理解しておいた方がいいCSSプロパティがあります。

それは、混同しがちなword-wrapプロパティとword-breakプロパティです。

word-wrapプロパティ

まず、word-wrapプロパティは、表示範囲や単語の切れ目で改行させるかを指定するプロパティです。

値にbreak-wordを指定することで、テキストの幅が行の幅より大きい時のみ折り返します。

このプロパティの利点は、行の幅よりテキストの幅が超過しない限り、不自然な改行を避けることができる点です。不自然な改行とは、例えば英単語のandが文中にあった場合、aで改行されると読みづらくなります。

できるだけこのような改行を防ぐ意味でもword-wrapプロパティを使用した方がいいのですが、欠点は日本語の単語では無効になることです。

word-breakプロパティ

word-wrapプロパティとよく似たプロパティにword-breakがあります。

このword-breakプロパティは、値にbreak-allを指定することで言語に関係なく表示範囲に合わせて改行されます。

よって単語の途中などで改行される場合があります。

表に日本語の単語を使う場合はこのword-breakプロパティで指定しますが、単語の途中で改行される可能性を念頭に置いておいた方がいいです。

画像で比べた方が分かりやすいと思いますので、それぞれの表にword-wrapとword-breakで指定してみました。

word-wrapの場合

word-breakの場合

PCで見ると改行の位置が異なりますね。スマホで見るとどうでしょうか？

このように、word-wrapの方が見やすい位置で改行されているのが分かります。

表からテキストがはみ出る時の対処法

テーブルCSSに上記で説明したプロパティを指定します。テーブルのスタイルの箇所に以下の構文のどちらかを追加します。

追加したテーブルCSSは以下のようになります。

私もすぐに忘れてしまうので覚書きとして残しておきます。