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

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

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

方法一：CSS3实现

单行文本截取：

text-overflow: ellipsis;

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

完整代码如下：

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

多行文本截取：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //x为行数，任意整数
overflow: hidden;

效果是：比如截取 3 行，会在第 3 行的末尾显示 ...

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

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