HTMLの「table」タグや「div」タグなど、ボックス内で長い英語文字列やURL等を入れるとボックスからはみ出して表示されることがあります。
ボックスに指定した幅で文字列を折り返しさせるために、CSSを使用し英語等の文字列をボックス内で改行させます。
CSSは「word-break」、「word-wrap」を使用し、文字列の改行の仕方を指定します。
■ 「table」タグの場合
「table」タグでは「word-wrap: break-word;」を使用するとボックス幅が伸びてしまうので、「word-break: break-all;」を使用して折り返しさせます。
【CSS】
1 2 3 4 5 6 7 8 9 10 11 | table { width: 300px;}table th { border: 1px solid #CCC; width: 50px;}table td { border: 1px solid #CCC; word-break: break-all;} |
【HTML】
1 2 3 4 | <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】
1 2 3 4 5 | div { border: 1px solid #CCC; width: 300px; word-wrap: break-word;} |
【HTML】
1 2 3 | <div>http://raining.bear-life.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> |
ピンバック: 石碾き蕎麦 水舎
ピンバック: urlを折り返して表示 | remainsxxx