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

横スクロール

はじめに

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

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

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

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

現象再現

会社 スプレッド 買スワップ 売スワップ 取引単位
USD/JPY TRY/JPY USD/JPY TRY/JPY USD/JPY TRY/JPY
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaFX会社 0.3銭 1.9銭 3円 93円 -58円 -178円 1,000通貨
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbFX会社 0.3銭 2.9銭 37円 80円 -40円 -90円 10,000通貨
ccccccccccccccccccccccccccccccccccccccccccccccccccccFX会社 0.27銭 4.8銭 39円 87円 -40円 -93円 1通貨

私のレスポンシブテンプレートの場合、突き抜けるのではなく、改行ができず横スクロールが発生しています。

改行させる方法

半角英数字を途中で改行させるには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;』の使い方について例を書いていこうと思います。

この記事のはじめの現象再現で、改行できずに横スクロールが発生してしまったテーブルを例に書いてみたいと思います。

01サンプル

まずは、各『thタグ』、『tdタグ』に『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>

上記ソースを表示すると下のような表が出来上がります。

会社 スプレッド 買スワップ 売スワップ 取引単位
USD/JPY TRY/JPY USD/JPY TRY/JPY USD/JPY TRY/JPY
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaFX会社 0.3銭 1.9銭 3円 93円 -58円 -178円 1,000通貨
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbFX会社 0.3銭 2.9銭 37円 80円 -40円 -90円 10,000通貨
ccccccccccccccccccccccccccccccccccccccccccccccccccccFX会社 0.27銭 4.8銭 39円 87円 -40円 -93円 1通貨

またもや表示領域からはみだしてしまっており、『word-wrap:break-word;』を設定する前と後で何ら変わりありません。

これは、tableのcell要素に幅を指定していないため、内容に合わせてセル幅を決める動きと幅に合わせて折り返す動きの2つの動きが合わさり、どのように動けばよいかわからずこのような事態になってしまいます。

02サンプル

サンプル①の問題を解決するために、『table-layout:fixed;』を使います。

サンプル①ではテーブル(表)の列幅を自動レイアウトにするauto(初期値)が設定されていましたが、 これをfixedの固定レイアウトへ変更します。

サンプル①からの変更箇所を赤字で示しています。

<table class="table table-bordered" style="table-layout:fixed;">
  <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>

上記ソースを表示すると下のような表が出来上がります。

会社 スプレッド 買スワップ 売スワップ 取引単位
USD/JPY TRY/JPY USD/JPY TRY/JPY USD/JPY TRY/JPY
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaFX会社 0.3銭 1.9銭 3円 93円 -58円 -178円 1,000通貨
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbFX会社 0.3銭 2.9銭 37円 80円 -40円 -90円 10,000通貨
ccccccccccccccccccccccccccccccccccccccccccccccccccccFX会社 0.27銭 4.8銭 39円 87円 -40円 -93円 1通貨

今回は枠内に収まるよう表示されているかと思います。

ただし、この方法も今回は皆さんには見えていないスタイルシートにtableのwidth:100%の記述をしており、この記述がないと上手く表示されませんでしたので、 上手く表示されない方はwidthを設定してみてください。

また、今回はわかり易いようにhtml上にstyleを書きましたが、実際に使われる際はスタイルシートへの記述が望ましいです。