Geckoエンジンで長いURLとかを折り返し表示
Firefoxを始めとするGecko系ブラウザの有名かつ困ったバグとして、「長いメールアドレスやURLを折り返してくれない」というのがあります。まぁ、別にメアドやURLに限らないんですけど、Geckoが区切りを検出できないASCII文字列が折り返されないってやつです。
IEだと独自CSSだけど、word-break:allしてやれば解決です。Firefoxだとoverflow:hiddenにしたり、諦めて突き抜けさせてたんだけど、わりと最近になって解決法があることを知りました。忘れないようにというか忘れてたので、あらためてメモ。
答え：ところどころに<wbr />を入れてやる
このwbr要素、(X)HTMLの正式な要素ではないのでDTDを見ても載ってません。元々はNetscape Navigator 2.0の独自拡張で、nobr内での改行候補を明示するためのものだったようです（参照：
wbr要素 - World Wide Web Guide）。
例えば、Smartyだとテンプレート内でこんな感じ。
{$url|wordwrap:2:'<wbr />':true}他の言語でもやることは変わらないので、適当にやってやればいいんじゃないでしょうか。Smartyだとmodifierにした方が分かりやすくていいかな。ひとまず今回はネタ提供まで、ということで。
もちろんDTDには載ってない要素なので、将来的にどうなるかも全く無保証だし、全てUA次第です。WinIEとFirefoxでしか見てないので、他でどうなるかも検証しておりません。
各文字の間に（ZERO WIDTH SPACE 文字、ゼロ幅スペース文字）を挟むといいよ、という話も聞いたけど手元の環境ではうまくいかなかったので不採用。IEで1文字毎にスペースが入ったりしました。ゼロ幅文字に1文字分の幅を確保するみたい。ただ、そのへんはフォント周りの環境・設定に依存するようです。選択した時だけ空白が入るなんて状況にも出くわしました。その時は、未選択時も要素の幅は空白が入ったものとして扱われ、表示としては半分のところで折り返される状態でした。
