HTMLの「table」タグや「div」タグなど、ボックス内で長い英語文字列やURL等を入れるとボックスからはみ出して表示されることがあります。
ボックスに指定した幅で文字列を折り返しさせるために、CSSを使用し英語等の文字列をボックス内で改行させます。
CSSは「word-break」、「word-wrap」を使用し、文字列の改行の仕方を指定します。

---

■ 「table」タグの場合

「table」タグでは「word-wrap: break-word;」を使用するとボックス幅が伸びてしまうので、「word-break: break-all;」を使用して折り返しさせます。

【CSS】

table {
    width: 300px;
}
table th {
    border: 1px solid #CCC;
    width: 50px;
}
table td {
    border: 1px solid #CCC;
    word-break: break-all;
}

【HTML】

<table>
    <th>URL</th>
    <td>http://raining.bear-life.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</table>

---

■ 「div」タグの場合

「div」タグでは「word-wrap: break-word;」と「word-break: break-all;」でどちらでも折り返しされますが、「word-wrap: break-word;」の方が単語の途中で折り返しするので「word-wrap: break-word;」を使用します。

【CSS】

div {
    border: 1px solid #CCC;
    width: 300px;
    word-wrap: break-word;
}

【HTML】

<div>
http://raining.bear-life.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

---

• ツイート
•