HTMLで長い英数字の文字列 URLが横幅を超えてはみ出てしまうのを防ぐ word-worp

PR

このような 長ーーーい URL

http://www.amazon.co.jp/gp/product/B00BOGUUK4/ref=s9_psimh_gw_p79_d3_i2?pf_rd_m=AN1VRQENFRJN5&pf_rd_s=center-2&pf_rd_r=0Y8FQ1KH1SYY4CHQVDMP&pf_rd_t=101&pf_rd_p=155416469&pf_rd_i=489986

こんなURLをそのまま表示させると、要素からはみ出でたり
場合によっては画面からはみ出ます

それを回避する方法です

 

イメージ

WS002392

 

CSSでword-worp を指定してやると、長すぎてはみ出る場合は自動で折り返してくれるようになります

CSS

.word-warp {
word-wrap: break-word;
}

クラス名は対応するものに変えてください
これを指定するだけで、文字が要素よりはみ出るのを防いでくれます

これ以外にword-breakというものもありますが
こちらは、有無を言わさず幅いっぱいに到達したら折り返しをさせます

日本語だとすべて最初からそういう動作をするのですが、英単語では 英単語を保持するようになっており
word-breakを使うと英単語も幅いっぱいに達すると強制的に折り返させるものです

 

幅に収めたいっていうだけなら、word-worpを使うと良いでしょう

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー