« 国立便り-20060806| vs愛媛FC | Main | 味スタ便り- 20060819|vs ザスパ草津 »

長いURL文字列を折り返して表示する

「サーバーインストール型Blogツールを試す(3)」の記事中、ココログでのリンク先画像へのURLを記述しているのだけど、本文表示エリアの右端で折り返されずそこで途切れてしまった(現在は修正済み)。

表示が変なのはすぐに気付いたがどうしたものやら分からないでそのまま放置していたのだが、やはり気になる。そこで「みんなで解決!広場」の初級者向け質問コーナーで尋ねてみたところ早速解決策を教えてもらった。CSS を使う方法と、タグを使う方法の2つ。備忘録としてここに書いておくことにした。

1.修正前(途中で尻切れトンボになっていると思います)
http://dmz.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/v2006071613561.jpg

2.CSS を使う方法(word-break を設定する)
□ソース
<div style="word-break:break-all;overflow:auto;">
http://dmz.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/v2006071613561.jpg
</div>
□実際の表示


http://dmz.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/v2006071613561.jpg

回答者の方も触れられていたが、word-break はブラウザ依存性があり IE ではうまく折り返されて表示されるが Firefox では横ツールバーが表示されることになる。

3.<wbr /> タグを利用する方法
□ソース
http://dmz.cocolog-nifty.com/.shared/image.html?<wbr />/photos<wbr />/uncategorized<wbr />/v2006071613561.jpg
□実際の表示
http://dmz.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/v2006071613561.jpg

<wbr /> は <br /> と違ってタグを記述しても必要のない箇所では改行されない。ある程度当たりを付けて適当にタグを挿入するのが少し面倒ではあるが、word-break を使う方法と比較して汎用性がある(単に自分の標準ブラウザが Firefox と云うことだが)のでこちらの方法を取ることにした。

手元にある html や CSSの参考書籍を開いてみたら当然の如くどちらの情報も掲載されていた。テキストエディタでタグを打ちながら html ソースを書いていた頃は自分でこうした書籍を調べ、それでも分からなければ Web で情報収集したり、と云うことをこまめにやっていたが、blog に慣れてしまうとそうしたことも忘れてしまう。と、ちと反省。

ちなみにココログの管理画面で編集記事を確認してもこの「長いURL文字列が折り返して表示れない」と云う現象は事前には確認できない。

|

« 国立便り-20060806| vs愛媛FC | Main | 味スタ便り- 20060819|vs ザスパ草津 »

Comments

Post a comment



(Not displayed with comment.)


Comments are moderated, and will not appear on this weblog until the author has approved them.



« 国立便り-20060806| vs愛媛FC | Main | 味スタ便り- 20060819|vs ザスパ草津 »