半角英数の文字が改行しない(jQueryで対策)

半角英数で区切ることのできないとき。

たとえば、長いURLやファイルパスなどなどをブラウザで表示すると、

折り返してくれるのと、くれないものがある。

これはブラウザ仕様なのですが、blogとかにURLとかはりつけてみるもレイアウトとか

くずれて悲しいことにもなる。

なので、jQueryで回避するスクリプト書いてみた。

`

function wordBreak(selector){
    $(selecter).each(function () {
            var spTxt = $(this).text().split("");
            if($.browser.opera){//opera
                $(this).html(spTxt.join("­"));
            }else if($.browser.msie){//IE
                $(this).css("word-break","break-all");
            }else{//others
                $(this).html(spTxt .join(""));
            }
    });
}

`

というかんじです。

FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」を参考にさせていただきました。

selectorを引数に指定しればOK。

operaの場合は、実体参照で半角英数を一文字ごとに入力。

IEは独自仕様のbreak-allを利用。

それ以外は、非推奨ですが<WBR>タグを使って改行します。(Firefox2の絡みで)

という具合で使っておけば長い半角英数、URL、ファイルパスなどを記載しても、ブログのレイアウトも壊れないと思う。

本当はもっと細かくブラウザ分岐してやったほうがいいと思うけど、とりあえずは・・・。