Wataame Frog

Table中の長いURLを改行させる

CSS にて width を 500px と指定したテーブルのデモ

改行しない

table{
    width: 500px;
}
改行しない http://www.amazon.co.jp/%E4%BB%BB%E5%A4%A9%E5%A0%82-3DS-%E3%81%A8%E3%81%B3%E3%81%A0%E3%81%9B-%E3%81%A9%E3%81%86%E3%81%B6%E3%81%A4%E3%81%AE%E6%A3%AE/dp/B0094E58C8%3FSubscriptionId%3D0XHH583C21NNGD49S3R2%26tag%3Djloveandspiri-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB0094E58C8

↑ CSSで横幅の指定しても、無視して表示される。

改行させる

table{
    width: 500px;
}

table#demo2{
    word-break: break-all;
    word-wrap: break-word;
}
改行させる http://www.amazon.co.jp/%E4%BB%BB%E5%A4%A9%E5%A0%82-3DS-%E3%81%A8%E3%81%B3%E3%81%A0%E3%81%9B-%E3%81%A9%E3%81%86%E3%81%B6%E3%81%A4%E3%81%AE%E6%A3%AE/dp/B0094E58C8%3FSubscriptionId%3D0XHH583C21NNGD49S3R2%26tag%3Djloveandspiri-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB0094E58C8

↑ 上記スタイルを指定することで、意図したとおりに表示する。