javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
javascript超过容器后显示省略号效果
在实际的项目中，由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号（…）显示，这样，按照习惯，人们都会知道这儿有文字被省略了。css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写：
{width:27em;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;}仅在Firefox火狐浏览器下无法实现文字溢出省略号表示，其文字直接从中间咔掉了,我这边不讲用css怎么样来实现这样的，具体的css实现可以自己百度去，我这边最主要的是讲怎么样用JS来实现，怎么样通过JS写一个简单的组件，我直接调用JS的初始化方法就可以实现掉！比如如下效果：
后面的点点点来提示用户有更多的内容未显示完成这样的效果！
先废话少说！首先来看看我做的demo效果，就能明白到底是个什么样的效果！
想看效果，请点击我！ok？
一：先来看看组件的配置项：如下：
targetCls
null, 目标要截取的容器必填项默认为null
limitLineNumber1, 要显示的行数默认为1行
type'...', 超过了容器长度显示的type默认为省略号
lineHeight 18, dom节点的行高默认行高为18
isShowTitletrue, title是否需要title来显示所有的内容默认为true
isCharLimitfalse 根据字符的长度来限制超过显示省略号
maxLength20 默认长度为20超过字符20后显示省略号
二：分析
1. 首先来讲讲此组件：支持2种方式来截取字符串，第一：根据字符的长度来截取，超过后显示省略号，比如我这样调用：
newMultiEllipsis({
"targetCls":'.text8',
"isCharLimit":true,
"maxLength":18
});
这样初始化的意思是说，isCharLimit为true是指用字符的个数来截取，最大的长度maxLength为18，这样初始化，因为代码里面会首先判断如果isCharLimit为true的话，就直接按照字符的个数来截取，比如如下代码：
2.第二种是根据多少行数及高度来截取的，比如默认配置项的行高是18，如果我想显示2行，那也就是说高度h=18*2,假如容器的高度是100，那么截取的方法是：
使用(100-type的长度-1) 是否大于18×2，如果大于的话，继续截取，否则的不截取，且显示省略号效果！如下代码：
缺点：但是使用行高截取的话，如果数据比较少的话，是可以的，但是如果数据很多的话，比如高度为500像素或者更多的话，那么相对来说会影响性能的，因为他们每次都要计算n次(n为循环调用函数多的意思)。
JS所有的代码如下：
复制代码
/*
*基于JS的MultiEllipsis
*@authortugenhua
*/
functionMultiEllipsis(options){
varself=this;
self.options=$.extend({},defaults,options||{});
self._init();
}
$.extend(MultiEllipsis.prototype,{
//页面初始化
_init:function(){
varself=this,
cfg=self.options;
if(cfg.targetCls==null||$(cfg.targetCls+"")[0]===undefined){
if(window.console){
console.log("targetCls不为空!");
}
return;
}
if(cfg.isShowTitle){
//获取元素的文本添加title属性
vartitle=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(){
varself=this,
cfg=self.options;
vartext=self.getText();
if(text.length>cfg.maxLength){
varcurText=text.substring(0,cfg.maxLength);
$($(cfg.targetCls+"")[0]).html(curText+cfg.type);
}
},
/*
*获取目标元素的text
*如果有属性data-text有值的话那么先获取这个值否则的话直接去html内容
*@methodgetText{public}
*/
getText:function(){
varself=this,
cfg=self.options;
return$.trim($($(cfg.targetCls+"")[0]).html());
},
/*
*设置dom元素文本
*@methodsetText{public}
*/
setText:function(text){
varself=this,
cfg=self.options;
$($(cfg.targetCls+"")[0]).html(text);
},
/*
*通过配置项的行数*一行的行高是否大于或者等于当前的高度
*@method_compareHeight{private}
*/
_compareHeight:function(maxLineHeight){
varself=this;
varcurHeight=self._getTargetHeight();
if(curHeight>maxLineHeight){
self._deleteText(self.getText());
}
},
/*
*截取文本
*@method_deleteText{private}
*@return返回被截取的文本
*/
_deleteText:function(text){
varself=this,
cfg=self.options,
typeLen=cfg.type.length;
varcurText=text.substring(0,text.length-typeLen-1);
curText+=cfg.type;
//设置元素的文本
self.setText(curText);
//继续调用函数进行比较
self._compareHeight(cfg.lineHeight*cfg.limitLineNumber);
},
/*
*返回当前dom的高度
*/
_getTargetHeight:function(){
varself=this,
cfg=self.options;
return$($(cfg.targetCls+"")[0]).height();
}
});
vardefaults={
'targetCls':null,//目标要截取的容器
'limitLineNumber':1,//限制的行数通过行数*一行的行高>=容器的高度
'type':'...',//超过了长度显示的type默认为省略号
'lineHeight':18,//dom节点的行高
'isShowTitle':true,//title是否显示所有的内容默认为true
'isCharLimit':false,//根据字符的长度来限制超过显示省略号
'maxLength':20//默认为20
};
以上这篇javascript超过容器后显示省略号效果的方法(兼容一行或者多行)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。