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

長いURLが折り返してくれない!URLを折り返させるCSS
(YouTube, AdSense, Play 公認エキスパート)
2021年03月02日 in Web・IT
記事内にPR・広告が含まれる場合があります

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

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。