DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Jeff has posted 3 posts at DZone. View Full User Profile

JQuery Cross Browser Word Breaker

10.16.2008
| 5737 views |
  • submit to reddit
        Taken from Hedger Wang (http://www.hedgerwow.com/360/dhtml/css-word-break.html) and turned into a jQuery plugin. Please see that page for an explanation.

Usage:
  $('[search]').breakWords();

(function($) {
  $.fn.breakWords = function() {
    this.each(function() {
      if(this.nodeType !== 1) { return; }

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
        //Lazy Function Definition Pattern, Peter's Blog
        //From http://peter.michaux.ca/article/3556
        this.runtimeStyle.wordBreak = 'break-all';
      }
      else if(document.createTreeWalker) {

        //Faster Trim in Javascript, Flagrant Badassery
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript

        var trim = function(str) {
          str = str.replace(/^\s\s*/, '');
          var ws = /\s/,
          i = str.length;
          while (ws.test(str.charAt(--i)));
          return str.slice(0, i + 1);
        };

        //Lazy Function Definition Pattern, Peter's Blog
        //From http://peter.michaux.ca/article/3556

        //For Opera, Safari, and Firefox
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false);
        var node,s,c = String.fromCharCode('8203');
        while (dWalker.nextNode()) {
          node = dWalker.currentNode;
          //we need to trim String otherwise Firefox will display
          //incorect text-indent with space characters
          s = trim( node.nodeValue ).split('').join(c);
          node.nodeValue = s;
        }
      }
    });

    return this;
  };
})(jQuery);