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