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

方法一：CSS3实现

 text-overflow: ellipsis;

完整代码如下：

        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里面，一个雪和x和8都是一个长度，但是这样真正去截取的时候是会有问题的，比如只截了半个字，而上面那段代码判断了是不是双字节，然后分别做了处理，这样能保证截取出来的都是完整的字符。