長いURLが折り返してくれない！URLを折り返させるCSS

ブログ等で URL を記載してページを紹介することはよくありますが、その URL がスマートで短いとは限りません。トップページの URL であればそれほど長くはないでしょうが、サブページになると何文字あるかわからないくらい長いという場合もあります。

そこで問題となるのが、URL がテーブル内や div のボックス内にあるとレイアウトを崩してしまうことです。URL は基本的に折り返されないためですね。テーブルやボックス内のレイアウトを崩さないように、URL が折り返してくれるようにすることも簡単にできます。もし長い URL でお困りであれば是非お試しください。

URL を折り返させる CSS

URL の途中で折り返したい場合は下記の CSS を使用します。

▼CSS

.longurl{word-break: break-all;}

▼HTML

<table>
 <th>URL</th>
 <td class="longurl">
 http://www.nagaiurl.com/totemonagai/urldehamidasu.html
 </td>
</table>

div ボックス内の場合でも上記の「word-break: break-all;」でも折り返しますが、「word-wrap: break-word;」も利用が可能です。

リンクを付ける場合「Webサイトはこちら」等のアンカーリンクにしてしまうのがスマートかもしれませんが、URL を記載しなくてはならない場合は是非活用してみてください。