Home / Blog / effect

截取字符串,超出部分显示省略号

Author: Vic.Wang 2015/11/23 Tags:字符串字符串截取省略号substrsubstringtext-overflowellipsis

在工作中,经常会遇到文本太多,影响页面布局,需要限制显示数量,在后端不做处理的情况下,我们一般有两种处理办法,要么限制显示范围,超出隐藏文本或者进行字符串截取,显示多少截取多少文字。

遇到文本多的时候,我们截取字符后,通常会要求加上...(省略号),表示还有很多内容,下面就说说怎么截取字符串,超出部分显示省略号...,主要有2种方法,一种是纯CSS3方法,一种是传统的JS控制。

方法一:CSS3实现

        text-overflow: ellipsis;
                    

这个属性是css3新加的,对于不是现代的浏览器,不支持的哦,还有这个属性要和另外三个属性widthoverflow: hidden;white-space: nowrap;配合才能生效,而且有个缺点,只能在一行显示,对于多行是不支持的。

完整代码如下:

        width: 150px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
                    

方法二:JS实现

代码如下:

        function substring(str, len, flow) {
            if ( ! str) return '';
            str = str.toString();
            var newStr = "",
                strLength = str.replace(/[^\x00-\xff]/g, "**").length,
                flow = typeof(flow) == 'undefined' ? '...' : flow;

            if (strLength <= len + (strLength % 2 == 0 ? 2 : 1)) return str;

            for (var i = 0, newLength = 0, singleChar; i < strLength; i++) {
                singleChar = str.charAt(i).toString();
                if (singleChar.match(/[^\x00-\xff]/g) != null) newLength += 2;
                else newLength++;

                if (newLength > len) break;
                newStr += singleChar;
            }

            if (strLength > len) newStr = $.trim(newStr) + flow;
            return newStr;
        }
                    

调用的时候传入要截取的字符串(str),截取长度(len),多余部分显示的符号(flow)。

注意:如果截取的是中文,截取长度要*2哦。

还是解释下原理吧,我们传入的字符串,有汉字、字母、数字和符号,对系统来说是有单字节字符和双字节字符之分的,比如汉字就属于双字节字符,不同字节的长度是不一样的,我们知道汉字是占2个字节的,但是在JS里面,一个x8都是一个长度,但是这样真正去截取的时候是会有问题的,比如只截了半个字,而上面那段代码判断了是不是双字节,然后分别做了处理,这样能保证截取出来的都是完整的字符。

说的有点绕,好像没讲清楚,先这样,日后再补。