iscle [イズクル] - あなたの生活に役立つネタを!

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

竹中文人
執筆者:
[最終更新日]2015/12/22
[カテゴリ]Web・IT

long-url

ブログ等で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を記載しなくてはならない場合は是非活用してみてください。