zoukankan      html  css  js  c++  java
  • 利用二分法获得截取字符串长度

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

    有同学会说,这还用的到JS吗?用CSS就好了,white-spacenowrap;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+'...'); }

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

  • 相关阅读:
    NTFS的交换数据流ADS应用
    解决binwalk运行提示缺少LZMA模块
    蓝牙扫描工具btscanner修复暴力扫描模式
    iOS 11开发教程(二十)iOS11应用视图美化按钮之设置按钮的状态
    Visual Studio 2017 版本 15.5.5
    iOS 11开发教程(十九)iOS11应用视图美化按钮之设置按钮的外观
    jquery的基本api
    vue知识点总结
    历史记录
    http加密原理
  • 原文地址:https://www.cnblogs.com/lilyimage/p/3613687.html
Copyright © 2011-2022 走看看