スマホ対応するならCSSでword-wrap:break-wordを指定しよう

最近、スマホ対応の案件が当たり前のようになってきました。スマホ対応する際に指定しておくと誰かを幸せにできるかもしれないCSSプロパティにword-wrapがあります。PCのディスプレイのみをターゲットにしていた時代では、あまり馴染みのないプロパティですが、スマホではword-wrapを指定しないとどのようなケースにどう表示されてしまうのでしょうか?kudox.jpのケースを例にして確認してみましょう。

word-wrapを指定しないとどうなるの?

まず、word-wrapを指定しない場合にどのように表示されるかをキャプチャ画像で見てみましょう。word-wrapプロパティは初期値のnormalの場合、英単語の途中では改行しません。そのため、URLやパスといった長い半角英数字がボックスに収まりきらない場合、ボックスの幅を突き破って表示されてしまいます。これだとデザイン的に崩れるだけでなく、斜めにスクロールできてしまうのでユーザビリティにも影響を与えてしまいます。

word-wrapを指定しない場合

word-wrapにbreak-wordを指定

そこで英単語の途中改行を指定するword-wrapプロパティを指定します。word-wrapは小要素に対して継承されるので、下記の例ではbody要素に対してword-wrap:break-word;を指定しています。しかし、このままではoverflow:scroll;を指定した要素まで単語の途中で改行されてしまうため、必要に応じてword-wrap:normal;で指定を上書きしておきます。

CSS

body {
  word-wrap:break-word;
}

.entry-content pre {
  overflow:scroll;
  word-wrap:normal;
}

これでボックスの幅に収まりきらない長い英単語を単語の途中でも改行してくれるようになります。次の画像は、word-wrap:break-wordを指定した場合のキャプチャ画像です。

word-wrap:break-wordを指定した場合

table内ではword-wrap:break-wordが有効にならない?

しかし、word-wrapの指定だけではtable内で英単語が改行されずにレイアウトが崩れるケースがあります。これは、tableが内包する要素の幅に応じて、セルの幅を自動的に調整する性質に起因しています。次の画像は、bodyにword-wrap:break-word;を指定したtableのキャプチャ画像です。右の3つのセルにはwidth:20%を指定していますが、セルの幅が自動的に拡げられた結果、ボックスの幅をはみ出しています。

table内でword-wrap:break-wordが効かないケース

table-layoutにfixedを指定

これを回避する方法の1つとして、table-layout:fixed;でセルの幅を固定する方法があります。table-layoutプロパティにfixedを指定することにより、セルの幅が固定されるためword-wrap:break-word;が有効になります。

CSS

table {
  table-layout:fixed;
}

次の画像は、table-layout:fixed;を指定した場合のキャプチャ画像です。セルの幅が固定され、英単語の途中でも改行されていることが確認できます。

table-layout:fixedを指定した場合

word-breakにbreak-allを指定

また、tableにword-break:break-all;を指定する方法もあります。word-wrapプロパティが英単語の途中で改行するかを指定するのに対して、word-breakプロパティは文の改行方法を指定するものです。table要素にword-break:break-all;を指定することにより、英単語の途中でも改行されるようになります。なお、現時点で私が確認した限り、Opera(Windows, Mac, Android)はword-break:break-allに対応していないようです。

CSS

table {
  word-break:break-all;
}

次の画像は、table要素にword-break:break-all;を指定した場合のキャプチャ画像です。table-layout:fixed;を指定した場合とは、少し違う結果になっていることがわかります。

word-break:break-allを指定した場合