js实现超出文本变成省略号

new MultiEllipsis
({ "targetCls" :
 '.text8', 
 "isCharLimit":
 true, "maxLength": 18
 });

/*
 
* 基于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
 
};