首页 > 其他 > 详细

利用二分法获得截取字符串长度

时间:2014-03-20 18:19:01      阅读:486      评论:0      收藏:0      [点我收藏+]

问题:固定宽度的容器,当字符串长度大于容器宽度的时候,后面出省略号。

有同学会说,这还用的到JS吗?用CSS就好了,white-spacenowrap;text-overflow: ellipsis;overflow:hidden 。嗯,是这样的。不过有时候问题比这还负责,比如说,文字后面还需要跟一个图标,当字符串长度过长的时候,文字要有省略号,但是图标还要显示。这种时候就没办法了,需要用到JS来做字符串的截断。

下面利用二分法来实现截取需要的字符串,希望能够有更简洁的方式来交流:

bubuko.com,布布扣
bubuko.com,布布扣
/**
** 放一个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+‘...‘); }
bubuko.com,布布扣
bubuko.com,布布扣

这样就能得到需要的字符串的长度啦,希望对小伙伴们有用~

利用二分法获得截取字符串长度,布布扣,bubuko.com

利用二分法获得截取字符串长度

原文:http://www.cnblogs.com/lilyimage/p/3613687.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!