Yuna's Tedious Talk

日々思ったことをつらつらと書いてます。


コメント欄に長いURLを入れた場合のレイアウト崩れ

本記事に関しては、私自身URLをそのままリンクとして使用することも
少ないですし、試しに見たときにそのまま横にびよーんと伸びちゃったら
改行をしてレイアウトの崩れは防ぐことはできますが、コメントを
いただいたときの参考URLなど、特にGoogle等の検索結果などといった
URLだとかなり長くなってしまいますよねぃ。
そうすると大抵のブラウザでは表示がへんてこりんになるわけで。

まずはOperaでみた状態。(Firefoxも同様)
Opera8.5と、Firefox2.0にて。

20070215-01.jpg


まだ、横にはみ出てはいるのですが、左のカラムはそのままなので、
まぁ…見れる状態。少し文字がはみ出ているせいで見た目がいただけない
ですけども…。

次にIEでみた状態。
IE6.0にて確認。

20070215-02.jpg


なんつぅか、俗に言うカラム落ちというヤツだと思いますが、左の
カラムは下にでーんと落ちちゃった状態。レイアウトの崩れがはげすぃ。
そして、私の勝手な先入観もあるかもしれないんですけど、こういう
カラム落ちっていうやつはIEでよくでる現象な気がします。

ただ、回避策はそれなりにあるわけで。

ぶっちゃけ…OperaとFirefoxはどっちもカラム落ちしてないから
そのままURLびよ〜んってなってもいいか、なんて思っちゃうんですが…。
怒られちゃう?やっぱり?
でも、なんかURLで試したところ、Operaに関してはアンダーバーか、
スラッシュかどちらかで区切りとして判断するようで、しっかり
折り返されていました。というわけでOperaはそのまま放置。
Firefoxについてはなんか自動折り返しのツールがあるようなのですが、
それもForefoxのみ反映されるようなので…ちょっと却下。

で、結局大半の人が使っているIEでのこのレイアウト崩れを何とかしなくては。

検索したらあっさり引っかかったCSS。

word-break:break-all;

この記述だけで万事OK…かと思いきや、tableタグ内にはこのスタイルシート
は効果がない模様。ブログではスタイルシートでのレイアウトがほとんど
になってると思うのでそういう面では心配することはなさそうですが…。
掲示板とかは逆にtableタグを使ってるものが多いと思うからこの記述以外に
対応するしかないかもですね…。

とりあえずブログで気になっただけだからいっか。w

そんなこんなでこのタグを入れたらこんな風にキレイになりましたー♪

同じくIE6.0にて確認。

20070215-03.jpg


とりあえずわたしこの記述は使ったことなかったもので…(ヤバイわね)、
覚え書きということで記事立てておきました♪
comments (6) | trackbacks (0) | edit

posted by 由奈