CSS文本溢出省略号：text-overflow:ellipsis及firefox兼容详解

这段js的原理很简单，就是通过不断的比较宽度值，然后逐个缩短字符宽度，当最后宽度合适的时候，停止循环，就实现了文字溢出显示…的效果。



(function($) {
        $.fn.ellipsis = function(enableUpdating){
            var s = document.documentElement.style;
            if (!('textOverflow' in s || 'OTextOverflow' in s)) {
                return this.each(function(){
                    var el = $(this);
                    if(el.css("overflow") == "hidden"){
                        var originalText = el.html();
                        var w = el.width();
  
                    var t = $(this.cloneNode(true)).hide().css({
                         'position': 'absolute',
                         'width': 'auto',
                         'overflow': 'visible',
                         'max-width': 'inherit'
                     });
                     el.after(t);
  
                     var text = originalText;
                     while(text.length > 0 && t.width() > el.width()){
                         text = text.substr(0, text.length - 1);
                         t.html(text + "...");
                     }
                     el.html(t.html());
  
                     t.remove();
  
                     if(enableUpdating == true){
                         var oldW = el.width();
                         setInterval(function(){
                             if(el.width() != oldW){
                                 oldW = el.width();
                                el.html(originalText);
                                 el.ellipsis();
                             }
                         }, 200);
                     }
                 }
             });
         } else return this;
     };
})(jQuery);

这段js还需要一段css来配合。

    .overflow {
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
   }

评论

2 楼 dengli19881102 2011-07-26  

pch272215690 写道

效率不行，数据较多就会卡死。

那你有什么更好的解决方法没?

1 楼 pch272215690 2011-07-12  

效率不行，数据较多就会卡死。