WEBページ上の長いURLが折り返してくれない
WEBページ上において、URLをそのまま記載したい場面があるかと思います。
トップページなどの短いURLであれば問題になるケースは少ないですが、下層ページの中には1行には収まりきらないことがあります。
その場合、ブラウザによる処理でURLを折り返すことなく表示してしまい、意図しない表示崩れの原因となってしまう可能性があります。
通常の英語であれば英単語を認識して適切な箇所で改行をしてくれるのですが、URLの場合は一語として認識してしまい、改行なしで表示してしまうのです。
URLを折り返すCSSプロパティ：word-break
長いURLが折り返して表示したい場合、CSSのword-breakプロパティを使います。
< HTML >
<p class="url">exsample.com/url/abcdefghijklmnopqrstuvwxyz</p>< CSS >
.url {
word-break: break-all;
}word-breakの注意点
word-breakプロパティを使うときの注意点として、htmlやbodyなどページ全体に word-break: break-all; を指定してしまうと、英単語など意図して改行をしたくない場合にも改行されてしまいます。
長いURLを表示したい場面はそれほど多いわけではないため、ページ全体に指定するのではなく、改行したい箇所にのみ指定することをおすすめします。
まとめ
WEBページ上で長いURLを折り返して表示したい時には、CSSのword-breakプロパティを使います。
.url {
word-break: break-all;
}word-break: break-all; の指定は、折り返したい箇所にのみ設定する方が良いでしょう。
また、長いURLを直接表示するのではなく「WEBサイトはこちら（※クリックしてもページ遷移しません）」のように、リンクを貼ってURLを直接記述しない方法も検討してみましょう。
コメント