word-break:break-allをFirefox等でも実現するjavascript（jQuery）
- 2008年11月02日
- category:javascript
- Comment(0)
- Trackback(0)
久しぶりの更新です。ブログ上でまだ知らせてなかったのですが、今年の1月からフリーで活動していて、半年しかたってないのにもかかわらず7月に面白法人KAYACに入社しました。それでここ３ヶ月くらい引っ越しやらなんやらで忙しくて更新してなかった、という言い訳です。はい。
アウトプットすることの大切さは身にしみてわかっているので今後は忙しさにかまけず、週一目標で更新します。たぶんします。できるだけします。
本題
そんなわけで本題。最近やたらとURLなどの文字列が折り返されない現象で頭を悩まされます。IEとSafari3以降はCSSでword-break:break-allを指定すれば折り返してくれます。Firefox3はハイフン(-)やスラッシュ(/）があればそこで折り返すのですが、半角英数のみだと折り返してくれません。word-break:break-allと少し挙動が違うようです。Firefox2はハイフン等の記号があっても折り返さず、突き抜けてしまします。
to-RさんがFirefoxとOperaでword-break:break-allを実現する「wordBreak.js」を公開していますが、tableだけにしか適用されずFirefox2をサポートしていないので、今回は自分で書いてみました。
$(function(){
var $targetElement = '.wordBreak';
if($.browser.msie) {
$($targetElement).css('word-break', 'break-all');
} else {
$($targetElement).each(function(){
if(navigator.userAgent.indexOf('Firefox/2') != -1) {
$(this).html($(this).text().split('').join('<wbr />'));
} else {
$(this).html($(this).text().split('').join(String.fromCharCode(8203)));
}
});
}
});IEとFirefox2以外はゼロ幅スペースを各文字の間に入れ込むことで半角英数のみでも改行されます。IEはそれで動かなかったのでword-break:break-allをCSSで指定しました。Firefox2はゼロ幅スペースで調子が悪かったので仕方なく<wbr />を埋め込んでます。
対応ブラウザ
動作確認したブラウザは以下になります。いやーこれだけブラウザがあると確認するだけでも大変っす。
- Windows
- IE6
- IE7
- Firefox2
- Firefox3
- Opera9.5
- Safari3.1
- googleCrome
- Mac
- Firefox3
- Firefox2
- Opera9.5
- Safari3.1
使い方とか注意点とか
$targetElementにはCSS形式で指定できるので「div.example li.url」とか自由に指定できます。あと、当然ですけどjQuery読まないと使えません。
注意点としては指定したDOM要素の子要素にHTMLのタグがあったとき、IE以外ではそのタグが消えてしまいます。具体的にどういうことかというと
<p class="wordBreak">test<em>emtext</em>test</p>としたときに、emタグが消えてしまいます（em内の「emtext」というテキストノードは残るためここではあえて「要素」でなく「タグ」と表現しています）。再帰的にテキストノードだけ取得して処理すれば解消されるんだろうけど、とりあえず自分で使う分には今のところ問題ないので、必要になったらそのとき考えます。
word-breakの今後
word-breakはCSS3以降では正式に採用が検討されているようなので、将来的にはCSSだけで制御できるようになると思います。しかしIEの独自拡張もたまにはいいのがあるなーと思った今日この頃です。
- Prev Entry
- 第3回CakePHP勉強会にいってきた
- Next Entry
- カヤックから本がでました
トラックバックURL
http://webtech-walker.com/archive/2008/11/02151611.html/trackback
※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。
