text-overflow 属性探究之处理单行或多行的标题、摘要（限制显示多行）

标题说明

现在是移动互联网的时代，传播特点：屏幕小，内容紧凑。以前在 PC 端可以好几十个字的标题，在移动端也不得不妥协。一些文章的标题，摘要，商城商品在列表中的名称等等，在版面有限的情况下需要做进一步的处理。比如：隐藏多于一行或两行的部分。

与使用 PHP 处理方法对比

PHP 处理过长标题流程比较简单，大概用到两个库函数：strlen() 和 substr()。前一个计算字符串长度，后一个截取一定长度的字符串，两者搭配使用可以返回一个定长的字符串，保证输出内容的容量。

[notice]处理中文可以使用 mb_strlen() 和 mb_substr()。因为 mb_strlen() 函数在不同 php 版本下返回的结果可能不同，所以使用前最好在部署环境中测试一下。[/notice]

使用前端 text-overflow 属性

前端处理长标题之前写过一篇文章 web 列表自动隐藏多余的文字并显示省略，主要 CSS 样式如下：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

不换行，溢出部分隐藏，文本溢出部分使用省略号代替。具体效果查看：text-overflow 效果。

当然，这是将标题处理成单行，今天修改小程序内容，无意间发现原来还有处理成多行的方法：

width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;

前面三行都认识，后面三行内容就是处理多行的样式代码，主要用的属性叫 -webkit-line-clamp，它是一个不规范属性，意指不被 CSS 规范认可，使用范围受限，需要测试浏览器的兼容性。其作用是限制在一个块元素显示的文本的行数，与其他两个属性组合使用：-webkit-line-clamp | WebKit的CSS扩展(WebKit是私有属性)。最后一个 word-break 是换行标准，break-all 表示允许词内换行。

-webkit-line-clamp 后面数字为 2，表示会限制使用该属性的元素文本显示在 2 行内。

延伸问题：如何保证标题展示两行

因为小程序首页商品标题设置最多可以展示两行（-webkit-line-clamp: 2），而标题长短不同，导致标题以下的内容不整齐。

给了客户几个方案选择，其中将字体调小和处理成一行并隐藏多余部分被否了，需要调整标题高度，使其不管是否占用两行，都要显示两行的高度。

解决方案： height: 2rem;