2020年08月20日

長いURLをきれいに表示させる方法2選

長いURLをきれいに折り返す方法

こんにちは!SeekNextの佐藤です。
今回はURLを綺麗に折り返す方法について書いていきたいと思います。

HPにURLを記載したいときに以下のような状態になった経験はありませんか?

URLが長すぎて、意図した幅よりも飛び出している状態です。日本語だと区切りを自動で付けてくれるのですが、英単語や長いURLは1単語としてブラウザが認識してしますので、このような状態が起こっています。

こんな悩みの解決策を2点ほど紹介します!

<pre>タグを使用して長いURLを綺麗に表示させる

上記のような状態を解決するには<pre>タグを使います!
使用したことない方も多いのではないかと思いますので、簡単に解説しておきます。

<pre></pre>

<pre>タグは、半角スペースや改行をそのまま表示します。

使用方法

HTML

<a href="#">
  <pre>https://www.google.com/search?sxsrf=ALeKk0195hlHJttQW12YGapBkZPrVPRo9A:1597923868734&amp;q=%E6%9D%B1%E4%BA%AC%E9%A7%85&amp;tbm=nws&amp;source=univ&amp;tbo=u&amp;sxsrf=ALeKk0195hlHJttQW12YGapBkZPrVPRo9A:1597923868734&amp;sa=X&amp;ved=2ahUKEwj1pMuk2qnrAhVQMd4KHZ4ODFEQt8YBKAF6BAgFEBE&amp;biw=1792&amp;bih=929&amp;dpr=2
  </pre>
</a>

見た目は飛び出さずに、綺麗に表示できました!

「word-break: break-all;」を使用して、折り返す方法

CSSのプロパティ「word-break」を使用して無理やり単語を折り返す方法です。設定できるプロパティを確認しておきます。

normal(初期値)指定しない
break-all指定された範囲に合わせて改行する。単語の途中でも改行。
keep-all単語の切れ目で改行する。単語の途中では改行されない。

使用方法

CSS

a {
  word-break: break-all;
}

ちゃんと、折り返すことができました!ただ、このプロパティは単語の途中でも強制的に改行させるので、個人的にはあまりおすすめしません。

綺麗なデザインを崩さないために細部まで気をつかおう!

長いURLを綺麗に表示させたい状況は、多くないかもしれませんが、しっかり対応しておかないとデザインの崩れに繋がります。綺麗なデザインを保つためにも細かな部分に気をつけてコーディングを行っていきましょう!