// javascript document /** * 基于js的multiellipsis * @author lijingui */ function multiellipsis(options) { var self = this; self.options = $.extend({}, defaults, options || {}); self._init(); } var cfg; $.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.lineheight == null){ cfg.lineheight = parseint($(cfg.targetcls).css('line-height').replace('px','')); cfg.lineheight = cfg.lineheight !== nan ? cfg.lineheight : 22; } self._compareheight(cfg.lineheight * cfg.limitlinenumber); }, gettext : function(obj) { return $.trim($(obj).html()); }, /* * 通过配置项的 行数 * 一行的行高 是否大于或者等于当前的高度 * @method _compareheight {private} */ _compareheight : function(maxlineheight) { var self = this, cfg = self.options; var itemmaxheight = 0; $(self.options.targetcls).each(function(){ //先重设置高度属性,以便高度可以被撑开,这样后面才能进行动态计算 $(this).height('auto'); //if(!$(this).attr('oldhtml')) $(this).attr('oldhtml',$(this).html()); //if($(this).attr('oldhtml')) $(this).html($(this).attr('oldhtml')); //end of 重设置一些值 if (cfg.isshowtitle) $(this).attr("title", $(this).text()); /*var curheight = $(this).height(); var curtext = $(this).html(); var typelen = cfg.type.length; var i = 1; //避免不正确使用 导致死循环 加个计数器 while(curheight > maxlineheight && i < 200){ i++; curtext = curtext.substring(0, curtext.length - typelen - 1); curtext += cfg.type; $(this).html(curtext); curheight = $(this).height(); }*/ if(itemmaxheight < $(this).height()) itemmaxheight = $(this).height(); }); if (itemmaxheight < maxlineheight) maxlineheight = itemmaxheight; $(self.options.targetcls).css({"height":maxlineheight+"px","overflow":"hidden","text-overflow": "ellipsis","-webkit-line-clamp": cfg.limitlinenumber + "","display":"-webkit-box","-webkit-box-orient":"vertical"}); }, /* * 截取文本 * @method _deletetext {private} * @return 返回被截取的文本 */ _deletetext : function(obj, text) { var self = this, cfg = self.options, typelen = cfg.type.length; var curtext = text.substring(0, text.length - typelen - 1); curtext += cfg.type; // 设置元素的文本 $(obj).html(curtext); // 继续调用函数进行比较 self._compareheight(cfg.lineheight * cfg.limitlinenumber); }, }); var defaults = { 'targetcls' : null, // 目标要截取的容器 'limitlinenumber' : 1, // 限制的行数 通过 行数 * 一行的行高 >= 容器的高度 'type' : '...', // 超过了长度 显示的type 默认为省略号 'lineheight' : null, // dom节点的行高 不传入会获取dom的行高 'isshowtitle' : true, // title是否显示所有的内容 默认为true 'ischarlimit' : false, // 根据字符的长度来限制 超过显示省略号 'maxlength' : 22 // 默认为20 };