javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

/* * 基于JS的MultiEllipsis * @author tugenhua */ function MultiEllipsis(options) {   var self = this;   self.options = $.extend({},defaults,options || {});   self._init(); } $.extend(MultiEllipsis.prototype,{    // 页面初始化   _init: function(){     var self = this,       cfg = self.options;     if(cfg.targetCls == null || $(cfg.targetCls + "")[0] === undefined) {       if(window.console) {         console.log("targetCls不为空!");       }       return;     }     if(cfg.isShowTitle) {       // 获取元素的文本 添加title属性       var title = self.getText();       $(cfg.targetCls ).attr({"title":title});     }     // 如果是按照字符来限制的话 那么就不按照高度来比较 直接返回     if(cfg.isCharLimit) {       self._charCompare();       return;     }     self._compareHeight(cfg.lineHeight * cfg.limitLineNumber);   },   /*    * 按照字符的长度来比较 来显示文本    * @method _charCompare {private}    * @return 返回新的字符串到容器里面    */   _charCompare: function(){     var self = this,       cfg = self.options;     var text = self.getText();     if(text.length > cfg.maxLength) {       var curText = text.substring(0,cfg.maxLength);       $($(cfg.targetCls + "")[0]).html(curText + cfg.type);     }   },   /*    * 获取目标元素的text    * 如果有属性 data-text 有值的话 那么先获取这个值 否则的话 直接去html内容    * @method getText {public}    */   getText: function(){     var self = this,       cfg = self.options;     return $.trim($($(cfg.targetCls + "")[0]).html());   },   /*    * 设置dom元素文本    * @method setText {public}    */   setText: function(text){     var self = this,       cfg = self.options;     $($(cfg.targetCls + "")[0]).html(text);   },   /*    * 通过配置项的 行数 * 一行的行高 是否大于或者等于当前的高度    * @method _compareHeight {private}    */   _compareHeight: function(maxLineHeight) {     var self = this;     var curHeight = self._getTargetHeight();     if(curHeight > maxLineHeight) {       self._deleteText(self.getText());     }   },   /*    * 截取文本    * @method _deleteText {private}    * @return 返回被截取的文本    */   _deleteText: function(text){     var self = this,       cfg = self.options,       typeLen = cfg.type.length;     var curText = text.substring(0,text.length - typeLen - 1);     curText += cfg.type;     // 设置元素的文本     self.setText(curText);     // 继续调用函数进行比较     self._compareHeight(cfg.lineHeight * cfg.limitLineNumber);   },   /*    * 返回当前dom的高度    */   _getTargetHeight: function(){     var self = this,       cfg = self.options;     return $($(cfg.targetCls + "")[0]).height();   } }); var defaults = {   'targetCls'        :   null,         // 目标要截取的容器   'limitLineNumber'     :   1,           // 限制的行数 通过 行数 * 一行的行高 >= 容器的高度   'type'          :   '...',         // 超过了长度 显示的type 默认为省略号   'lineHeight'       :   18,         // dom节点的行高   'isShowTitle'       :    true,        // title是否显示所有的内容 默认为true   'isCharLimit'       :   false,        // 根据字符的长度来限制 超过显示省略号   'maxLength'        :   20          // 默认为20 };