【CSS/html】table,tdで折り返し,改行させる方法

「tableからURLがはみ出る！」

tableの中に(空白のない)長い半角英数の文字列があると、tableをはみ出したり、tdの幅を伸ばしてしまいます。

table,tdで折り返し,改行させる方法を解説します。

【結論】word-break:break-wordを指定

word-breakは単語レベルでの改行を指定するCSSです。

「word-break:break-word」と「word-break:break-all」のどちらも改行できますが、短い単語に対して違いがあります。

「break-word」がおすすめです。

word-break: break-wordを指定した場合 This is a map of the location of Tokyo Tower https://goo.gl/maps/CNiuWh4MNumwV9fj7

word-break: break-allを指定した場合 This is a map of the location of Tokyo Tower https://goo.gl/maps/CNiuWh4MNumwV9fj7

<table border="1">
    <tr>
        <td style="word-break: break-word">word-break: <b>break-word</b>を指定した場合<br><br>This is a map of the location of Tokyo Tower https://goo.gl/maps/CNiuWh4MNumwV9fj7</td>
        <td style="word-break: break-all">word-break: <b>break-all</b>を指定した場合<br><br>This is a map of the location of Tokyo Tower https://goo.gl/maps/CNiuWh4MNumwV9fj7</td>
    </tr>
</table>

word-break:break-word

This is a map of the location of Tokyo Tower https://goo.gl/maps/CNiuWh4MNumwV9fj7

左の例のように「word-break:break-word」は基本的には単語(半角英数)をスペースで改行させて、単語が横幅を超えるなら改行させます。 基本的にはこちらをオススメします。

word-break:break-all

This is a map of the location of Tokyo Tower https://goo.gl/maps/CNiuWh4MNumwV9fj7

左の例のように「word-break:break-all」は単語を完全に無視して横幅に合わせて改行させます。 英語が読みづらくなるため、word-break:break-wordでは都合が悪いときだけ使いましょう。