【jQuery】word-break:break-all;をie以外でも実装するjQueryプラグイン

半角文字列が続くとボックスをはみ出して大変なことになることが多々あったり。 調べた結果 http://webtech-walker.com/archive/2008/11/02151611.html http://d.hatena.ne.jp/bushimichi/20091008/1254973137

1番目のプラグインは、入れ子になっている場合処理をしていない 2番目のプラグインは、入れ子を処理するがbrや空要素の場合でも再帰しているかつ、グローバル変数作ってるのが気になる。 と、気になることが多々あったので2番目の方のプラグインをマッシュアップ！

/*
 *  wordbreakplugin : wordbreak_0.1_gecko.js
 */
(function($){
  $.extend({
    wb : new function(){
      this.version = 0.1+'_gecko';
      this.sep = String.fromCharCode(8203);
      var h = [],retext = [];
      this.remake = function(elm){
        var self = this;
        h = elm.contents();
        elm.html('');
        $(h).each(function(){
          if(this.nodeType == 3){
            retext = $.trim(this.textContent.split('').join(self.sep));
          }else if(this.textContent == ''){
            retext = this;
          }else{
            retext = self.remake($(this));
          }
          elm.append(retext);
        });
        return elm;
      }
    }
  });
  $.fn.wb = function(){
    if(undefined !== window.ActiveXObject){
      $(this).css('word-break', 'break-all');
    }else{
      $(this).each(function(){ $.wb.remake($(this));});
    }
    return this;
  }
}(jQuery));

ソース上の改行や半角空白のインデントがあるとそのままappendしちゃうので$.trimを使って文字列の前後の空白を除去。 firefox2はwbrじゃないといかんらしいので、 this.sep = (navigator.userAgent.indexOf(‘Firefox/2′) != -1)? ‘‘ : String.fromCharCode(8203) ; こうするんだろうなぁ。やってないけど。

Tags: