问题:固定宽度的容器,当字符串长度大于容器宽度的时候,后面出省略号。
有同学会说,这还用的到JS吗?用CSS就好了,white-space: nowrap;text-overflow: ellipsis;overflow:hidden 。嗯,是这样的。不过有时候问题比这还负责,比如说,文字后面还需要跟一个图标,当字符串长度过长的时候,文字要有省略号,但是图标还要显示。这种时候就没办法了,需要用到JS来做字符串的截断。
下面利用二分法来实现截取需要的字符串,希望能够有更简洁的方式来交流:
/** ** 放一个span在页面上,el是这个span的dom元素节点,把需要截取的字符串放到span里面,然后通过比较span的宽度与容器的宽度,得到字符串的长度 **/ var con = 100;//容器的宽度100 function(str){ var _w = el.html(str).width(), _l = str.length; if(_w <= con){//如果字符串长度小于容器的宽度,返回 return str; } /**二分法得到字符串的长度开始**/ var _r = _l; //增加,当字符串的长度小于容器的长度的时候,一半一半的增加字符串的长度 var addR = function(){ while(_w < a){ _r = parseInt(_r/2,10); if(_r == 1){ break; } _l = _l + _r; var b = str.substr(0, _l); _w = el.html(b + '...').width(); } }; //减少,当字符串的长度大于容器的长度的时候,一半的一半的减少字符串的长度 var reduR = function(){ while(_w > a){ _r = parseInt(_r/2,10); if(_r == 1){ break; } _l = _l - _r; var b = str.substr(0, _l); _w = el.html(b + '...').width(); } };
while(_r > 1){ reduR(); addR(); } //结束条件 if(_w > a){ b = str.substr(0, _l - 1); }else{ b = str.substr(0, _l + 1); } /**二分法得到字符串的长度结束**/ return (b+'...'); }
这样就能得到需要的字符串的长度啦,希望对小伙伴们有用~