[CSS] 英文の英語の途中で改行させる

CSS

2019.03.31

英文字はデフォルト状態では、単語の途中で改行されません。
これを、英文字を単語の途中で改行させるサンプルです。

サンプルソース

例）英文字の途中で改行させる

table{
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
}

td{
  border:1px solid #808080;
  word-wrap:break-word;
}

table{

border-collapse:collapse;

table-layout:fixed;

width:100%;

}

td{

border:1px solid #808080;

word-wrap:break-word;

}

3行目と9行目の指定を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>サンプル</title>
  <link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
  <table>
    <colgroup style="width:60%;">
    <colgroup style="width:40%;">
    <tr>
        <td>ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
        <td>ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
    </tr>
    <tr>
        <td>123456789012345678901234567890</td>
        <td>123456789012345678901234567890</td>
    </tr>
  </table>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<table>

<tr>

<td>ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

【結果】

ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ	ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
123456789012345678901234567890	123456789012345678901234567890

ブラウザのサイズを変更して改行位置が変わることをご確認ください。

備考

tableに「table-layout:fixed」、tdに「word-wrap:break-word」を指定するのがポイントです。