Happy Swing

2007年3月19日

英文やURLをCSSで強制改行する方法

久々に仕事でBlogをコーディングしていたら、これまた困ったことが起こりました。
その問題というのは、

【URLを枠内に収めるように強制改行させる】

というもの。
そもそも、URLというのは一つながりの「単語」として認識されてしまうので、途中で改行されることは許されない、という前提があります。
なので、WinIE6はともかく、モダンブラウザと呼ばれているFirefoxやOperaなどだと、ボックスの幅を突き抜けてしまって悲惨なことになってしまいます・・・
でも、そんなこと言われて「はい、そうですね。仕方ないですね」で済むわけがありません。改行しないといけないんです。枠に収まらないと怒られるんです！
というわけで、強制的に改行させる方法がないか、探してみました。

ググってみたら、一応以下の方法で強制改行させられることが判明。

.クラス名{
	word-break:break-all;
}

以上です。
・・・えっ！？それだけ？？すげー便利だ！
と思うかもしれませんが、これには一つワナがあるんです。それは・・・

「IE独自の拡張機能なので、IEにしか反映されない」

○|￣|＿
そうなんです。
IEにしか効かないんです。
これでプレビューすると分かりますが、IEはキレイに折り返して枠の中に納まっていますが、FirefoxやOperaでは折り返さずに、そのまま枠を飛び出してとんでもないことになってしまいます。
で、ここでIEを取るか、モダンブラウザを取るかを迫られるのか・・・と思ったのですが、いくらIEできれいに見えてもFirefoxやOperaで見れないと意味ありません。というか、そんなページは作りたくありません。
じゃあ、URLだけ画像にしたら？と思うかもしれませんが、コピペさせたいときには画像にすら出来ません。
というわけで、調べました！
すると、こんなタグを見つけました。それは・・・

<wbr>

・・・なんじゃ？こりゃ。
このが何者かというと、これは
「普段、文章中で改行して欲しくないんだけど、もし改行するならここでしてくださいね！」
という合図。
つまり、このタグが含まれていても横幅が許す限りは改行しないんですが、もし横幅いっぱいのところにきたらココで改行してくれるという優れもの。

使い方は簡単。
改行してもいいところにこのを入れるだけ。ソースには挿入したが見えますが、表示上は見えません。また、HTMLで表示された画面からコピーして、テキストエディタにペーストしてもは表示されません。
（※XHTMLでコーディングするときは&タグを閉じないといけないので、になるのかな？？）
たまに融通利かないみたいですけど、まぁでも一応うまく行くみたいなんで、かなり便利かと。
覚えておいて損は無いタグだと思います。