jquery插件--多行文本缩略

1、webkit内核多行缩略样式

    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

 

2、使用javascript做兼容

/**
 * 多行缩略
 * @author rubekid
 * {
 *    maxLine:2, //最多显示行默认为1
 *    ellipsisChar:"..." //省略占位符，建议不设置，与原生一致 
 * }
 */
(function ($) {
    
    var supportLineClamp = function(){
        var div = document.createElement('div');
        var style = computeStyle(div);
        return style!=null && "-webkit-line-clamp" in style;
    }();
    

    function computeStyle(el){
        if(window.getComputedStyle){
        
            return window.getComputedStyle(el,null); 
        }
        return el.currentStyle;
    }

    /**
     * 设置样式
     * @param Element el
     * @param JSON css
     */
    function setStyle(el, css){
        for(var i in css){
            el.style[i] = css[i];
        }
    }

    function ellipsis($elem, options) {
        var maxLine = options.maxLine ||1;
        var lineHeight = parseFloat($elem.css("line-height"));
        var maxHeight = maxLine * lineHeight;
        var content = $elem.text();
        var $temp_elem = $elem.clone(false)
            .css({"visibility": "hidden","overflow":"visible", "height":"auto"})
            .appendTo($elem.parent());
        $temp_elem.text(content);
        var height = $temp_elem.height();
        if(height > maxHeight){
            if(supportLineClamp){
                setStyle($elem.get(0), {
                    "text-overflow":"ellipsis",
                    "display":"-webkit-box",
                    "-webkit-line-clamp":maxLine,
                    "-webkit-box-orient":"vertical",
                    "overflow":"hidden"
                });

            }
            else{
            
                var _width = $elem.width();
                var ellipsis_char = options.ellipsisChar;
                var lineCount = 0;
                var texts = content.split("\n", maxLine);
                var newTexts = [];
                for(var i=0; i<texts.length; i++){
                    var text = texts[i];
                    $temp_elem.text(text);
                    height = $temp_elem.height();
                    var _lineCount = height / lineHeight;
                    if(lineCount + _lineCount >= maxLine){
                        text = text + ellipsis_char;
                        $temp_elem.text(text);
                        text = text.replace(' ','　'); //for fix white-space bug　
                        $temp_elem.css({"whiteSpace": "nowrap","width":"auto" });
                        var max = (maxLine - lineCount) * _width;
                        var width = $temp_elem.get(0).scrollWidth;
                        if(width > max){
                            var stop =  Math.floor(text.length * max / width); // for performance while content exceeding the limit substantially
                            var temp_str = text.substring(0,stop) + ellipsis_char;
                            width = $temp_elem.text(temp_str).get(0).scrollWidth;
                            if(width > max){
                                while (width > max && stop > 1) {
                                    stop--;
                                    temp_str = text.substring(0, stop) + ellipsis_char;
                                    width = $temp_elem.text(temp_str).width();
                                }                    
                            }
                            else if(width < max){
                                while (width < max && stop < text.length) {
                                    stop++;
                                    temp_str = text.substring(0, stop) + ellipsis_char;
                                    width = $temp_elem.text(temp_str).get(0).scrollWidth;
                                }
                                if(width > max){
                                    temp_str = text.substring(0,stop -1)+ellipsis_char;
                                }
                            }
                            
                            newTexts.push(temp_str.replace('　',' '));
                        }
                        else{
                            newTexts.push(text);
                        }
                        break;
                    }
                    newTexts.push(text);
                    lineCount +=_lineCount;
                    
                }
                text = newTexts.join("\n");
                $temp_elem.text(text).css(
                    {"whiteSpace": "","width": $elem.width() }
                );
                var lastIndex = text.length;
                var _temp_str = text;
                height = $temp_elem.height();
                while(height > maxHeight){
                    _temp_str = text.substring(0, --lastIndex) + ellipsis_char;
                    $temp_elem.text(_temp_str);
                    height = $temp_elem.height();
                }
                
                $elem.text(_temp_str);
            }
        }
        $temp_elem.remove();
    }


    var defaults = {
        maxLine: 1,
        ellipsisChar:'...'
    };

    $.fn.ellipsis = function (options) {
        return this.each(function () {
            var $elem = $(this);
            var opts = $.extend({}, defaults, options);
            ellipsis($elem, opts);
        });
    };

    $.fn.ellipsis.options = defaults;
})(jQuery);