HTMLで連続した半角英数字を改行する方法

横スクロール
目次

1. レスポンシブでも横スクロール発生

2. 半角英数字を改行させる方法

2-1. 2つの手法の違い

2-2. 改行手順①

2-3. 改行手順②

レスポンシブでも横スクロール発生

WebSiteやブログを作っていると、tableタグや、divタグなどでブロック要素を使用する場面は出てくるかと思います。

私のこのブログではレスポンシブテンプレートを使用しているので、表示に関しては安心しきっていたのですが、たまたまテーブルの『tdタグ』内に半角英字をたくさん使っていた箇所があり、ブログをアップした後にスマホで表示確認すると、レスポンシブテンプレートを使っているにもかかわらず横スクロールが発生していました。

モバイルフレンドリーテストの結果は、モバイルフレンドリーですと表示されたため、スマホの検索順位に影響はないのかもしれませんが、かっこ悪いので、あわてて修正しました。

今回は、その半角英数字を改行させる方法を記事にしたいと思います。

現象再現

PCでこの記事を読んでくれている方にも現象が再現されるように、少し半角英数字を長くして、横スクロールが発生する現象を起こしたいと思います。

このページ内で横スクロールを発生させてしまうと、この記事の表示が乱れてしまうため、別ページで現象を起こしたいと思います。

レスポンシブテンプレートで横スクロール発生現象ページをご覧ください。

上記リンク先を確認していただければわかるように、『横スクロール』が発生しているかと思います。

参考までに、横スクロールが発生する『table』のソースは以下のようになります。

<table class="table table-bordered">
    <tr>
        <th rowspan="2">会社</th>
        <th colspan="2">スプレッド</th>
        <th colspan="2">買スワップ</th>
        <th colspan="2">売スワップ</th>
        <th rowspan="2">取引単位</th>
    </tr>
    <tr>
        <th>USD/JPY</th>
        <th>TRY/JPY</th>
        <th>USD/JPY</th>
        <th>TRY/JPY</th>
        <th>USD/JPY</th>
        <th>TRY/JPY</th>
    </tr>
    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaFX会社</td>
        <td>0.3銭</td>
        <td>1.9銭</td>
        <td>3円</td>
        <td>93円</td>
        <td>-58円</td>
        <td>-178円</td>
        <td>1,000通貨</td>
        </tr>
        <tr>
        <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbFX会社</td>
        <td>0.3銭</td>
        <td>2.9銭</td>
        <td>37円</td>
        <td>80円</td>
        <td>-40円</td>
        <td>-90円</td>
        <td>10,000通貨</td>
    </tr>
    <tr>
        <td>ccccccccccccccccccccccccccccccccccccccccccccccccccccFX会社</td>
        <td>0.27銭</td>
        <td>4.8銭</td>
        <td>39円</td>
        <td>87円</td>
        <td>-40円</td>
        <td>-93円</td>
        <td>1通貨</td>
    </tr>
</table>

半角英数字を改行させる方法

2つの手法の違い

半角英数字を途中で改行させるには『word-wrap:break-word;』または『word-break:break-all;』を使います。

では、2つの違いを説明していきたいと思います。

word-wrap:break-word; とは

『word-wrap: break-word;』は枠内に収まらない英単語の場合は単語の途中であっても折り返しますが、枠内に収まる限り、単語の途中では折り返さないようにします。

つまりは、ボックス要素の幅が指定されている場合など折り返さないと入りきらない場合に限り折り返します。

word-break:break-all; とは

『word-break:break-all;』はどんな状況であっても強制的に改行が発生します。

そのため、【is】のような二文字の単語であっても改行位置にあれば改行されてしまうといったデメリットがあり、あまり好まれない方法です。

改行手順①

上で『word-break:break-all;』はあまり好ましくないとお話しましたので、『word-wrap: break-word;』の使い方について例を書いていこうと思います。

子要素に指定

『table』の場合、『th』や『td』などの子要素に『word-wrap:break-word;』を設定します。

先ほどのサンプルテーブルに『word-wrap:break-word;』を追加してみます。

<table class="table table-bordered">
    <tr>
        <th rowspan="2">会社</th>
        <th colspan="2">スプレッド</th>
        <th colspan="2">買スワップ</th>
        <th colspan="2">売スワップ</th>
        <th rowspan="2">取引単位</th>
    </tr>
    <tr>
        <th style="word-wrap:break-word;">USD/JPY</th>
        <th style="word-wrap:break-word;">TRY/JPY</th>
        <th style="word-wrap:break-word;">USD/JPY</th>
        <th style="word-wrap:break-word;">TRY/JPY</th>
        <th style="word-wrap:break-word;">USD/JPY</th>
        <th style="word-wrap:break-word;">TRY/JPY</th>
    </tr>
    <tr>
        <td style="word-wrap:break-word;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaFX会社</td>
        <td>0.3銭</td>
        <td>1.9銭</td>
        <td>3円</td>
        <td>93円</td>
        <td>-58円</td>
        <td>-178円</td>
        <td>1,000通貨</td>
    </tr>
    <tr>
        <td style="word-wrap:break-word;">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbFX会社</td>
        <td>0.3銭</td>
        <td>2.9銭</td>
        <td>37円</td>
        <td>80円</td>
        <td>-40円</td>
        <td>-90円</td>
        <td>10,000通貨</td>
    </tr>
    <tr>
        <td style="word-wrap:break-word;">ccccccccccccccccccccccccccccccccccccccccccccccccccccFX会社</td>
        <td>0.27銭</td>
        <td>4.8銭</td>
        <td>39円</td>
        <td>87円</td>
        <td>-40円</td>
        <td>-93円</td>
        <td>1通貨</td>
    </tr>
</table>

そうすると、表示は、以下のようになります。

『word-wrap:break-word;』を子要素に追加ページをご覧ください。

リンク先を見ていただいてもわかるように、これだけでは横スクロールは解消されていません。

『word-wrap:break-word;』を指定した『子要素』の親要素(tableタグ)が『table-layout:auto』⇒列幅を自動レイアウトにする設定になっているため、『word-wrap:break-word;』の設定が無視されてしまっています。

改行手順②

table内において、半角英数字を改行させるためには、tableを固定レイアウトにする必要があります。

そのため、さらにコードを書き換えます。

<table class="table table-bordered" style="table-layout:fixed;" width="100%">
    <tr>
        <th rowspan="2">会社</th>
        <th colspan="2">スプレッド</th>
        <th colspan="2">買スワップ</th>
        <th colspan="2">売スワップ</th>
        <th rowspan="2">取引単位</th>
    </tr>
    <tr>
        <th style="word-wrap:break-word;">USD/JPY</th>
        <th style="word-wrap:break-word;">TRY/JPY</th>
        <th style="word-wrap:break-word;">USD/JPY</th>
        <th style="word-wrap:break-word;">TRY/JPY</th>
        <th style="word-wrap:break-word;">USD/JPY</th>
        <th style="word-wrap:break-word;">TRY/JPY</th>
    </tr>
    <tr>
        <td style="word-wrap:break-word;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaFX会社</td>
        <td>0.3銭</td>
        <td>1.9銭</td>
        <td>3円</td>
        <td>93円</td>
        <td>-58円</td>
        <td>-178円</td>
        <td>1,000通貨</td>
    </tr>
    <tr>
        <td style="word-wrap:break-word;">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbFX会社</td>
        <td>0.3銭</td>
        <td>2.9銭</td>
        <td>37円</td>
        <td>80円</td>
        <td>-40円</td>
        <td>-90円</td>
        <td>10,000通貨</td>
    </tr>
    <tr>
        <td style="word-wrap:break-word;">ccccccccccccccccccccccccccccccccccccccccccccccccccccFX会社</td>
        <td>0.27銭</td>
        <td>4.8銭</td>
        <td>39円</td>
        <td>87円</td>
        <td>-40円</td>
        <td>-93円</td>
        <td>1通貨</td>
    </tr>
</table>

表示すると以下のようになります。

固定レイアウトに変更ページをご覧ください。

『横スクロール』は発生せず、画面内にテーブルが収まり、半角英数字の箇所で改行されているのがわかるかと思います。

注意事項

注意していただきたいのは、

『table-layout:auto』：自動レイアウト

⇒ 『table-layout:fixed』：固定レイアウト

に変更したため、tableの横幅を指定する必要があります。

上記サンプルでは、『width="100%"』の設定を追加しています。

また、今回は、わかり易いように直接コード内に『style』や『width』の記述を行っていますが、基本的にはcssで対応する事をおすすめします。

記事作成日：2021.07.02