单行/多行文本溢出显示省略号

一个图文列表，往往我们不确定文本到底有多少，是英文、中文还是中英文混合，当显示不完文本的时候，我们需要将超出部分隐藏，然后添加一个省略号提示用户还有更多内容。

显示省略号的这个效果感觉只有后端才能实现的样子，但是其实前端 CSS 也可以实现，而且可以自适应网页宽度显示，后端截取的话是固定的，设备尺寸小了又会多出来一行。

单行文本溢出显示省略号

CSS 已经有这项功能，能够控制单行文本的溢出显示省略号，而且兼容性还不错，基本在现在主流的浏览器上面显示没有任何问题，包括 PC 和手机端的浏览器：

<p class="alone-text">这里是一段很长的文本，我们来演示如何在 CSS 中设置文本溢出显示省略号，
这个效果基本在现在主流的浏览器上面显示没有任何问题，包括 PC 和手机端的浏览器。</p>

.alone-text{
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

点击这里查看示例 。

多行文本溢出显示省略号

但是我们的显示效果往往并不是单行文本，而是多行文本的溢出问题，查阅了很多资料，我找到了 Chrome 的一个 API 可以解决多行文本溢出显示省略号的问题，这个属性就是-webkit-line-clamp，只可惜这个 API 居然目前只有 Chrome 才能支持，而且没有列入 W3C 的标准范畴内，也就是这个功能只有在 Chrome 下才能用，不过现在的移动端都是用的 webkit 的内核，如果你是针对手机端开发，那么你可以放心的使用-webkit-line-clamp，接着来看下实现：

<p class="area-text">这里是一段很长的文本，我们来演示如何在 CSS 中设置文本溢出显示省略号，
这个效果基本在现在主流的浏览器上面显示没有任何问题，包括 PC 和手机端的浏览器。
接下来这个是演示多行文本超出部分显示省略号的示例。这个示例可能存在兼容性问题。</p>

.area-text{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

点击这里查看示例 ，注意这个效果只有在 Chrome 浏览器才有效果，其他浏览器看不到效果的。

JavaScript 截取字符串

如果是使用 JavaScript 的话，就是截取我们需要的字符串，然后在文本的最后加上省略号，截取字符串我们可以用到 substring() 和 substr()，还有一个问题就是中英文混合，如果我们预先定义了字符串中文长度，但是英文所占用的空间更小，可能相同的样式，中文显示两行，而换成同长度的英文就只显示一行。

我们这里使用一个自定义的函数来处理这些问提：

function subString(str, len, hasDot) {
    var newLength = 0;
    var newStr = "";
    var chineseRegex = /[^\x00-\xff]/g;
    var singleChar = "";
    var strLength = str.replace(chineseRegex, "**").length;
    for (var i = 0; i < strLength; i++) {
        singleChar = str.charAt(i).toString();
        if (singleChar.match(chineseRegex) != null) {
            newLength += 2;
        }
        else {
            newLength++;
        }
        if (newLength > len) {
            break;
        }
        newStr += singleChar;
    }

    if (hasDot && strLength > len) {
        newStr += "...";
    }
    return newStr;
}

使用方法

//截取中文 4 个长度的
var str='层叠样式表，英文全称：Cascading Style Sheets，是一种用来表现 
HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）
等文件样式的计算机语言。';
subString(str,8,false);
//截取字符串，长度中文 8/2
//4 个长度
//是否添加省略号"..."

PHP 截取字符串

如果是使用 PHP 截取字符串，那就更简单了，只需要一个系统函数即可完成，而且还支持中英文混排，自定义截取的长度等功能。

mb_strimwidth()

按字符宽度获取

mb_strimwidth ( string $str , int $start , int $width [, string $trimmarker [, string $encoding ]] )

参数说明：

• $str // 指定字符串
• $start // 指定从何处开始截取
• $width // 截取文字的宽度
• $trimmarker // 超过 $width 数字后显示的字符串
• $encoding // 设置字符编码【例如：UTF-8】

举个例子来说明

$string="242432 反对感是 456 犯得上广泛大使馆地方 7890";
echo mb_strimwidth($string,0,14,'...','UTF-8');

输出的结果就是：242432 反对...

mbstring()

在 PHP 中，substr() 函数截取带有中文字符串的话，可能会出现乱码，这是因为中西文一个字节所占有的字节数不一样，而 substr 的长度参数是按照字节去算的，在 GB2312 编码时，一个中文占 2 个字节，英文为 1 个字节，而在 UTF-8 编码当中，一个中文可能占有 2 个或 3 个字节，英文或半角标点占 1 字节。

直接使用 PHP 函数 substr 截取中文字符可能会出现乱码，主要是 substr 可能硬生生的将一个中文字符 锯 成两半，使用 mbstring 扩展库的 mb_substr 截取就不会出现乱码了。