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

2020-04-03T16:28:00

标题说明

现在是移动互联网的时代,传播特点:屏幕小,内容紧凑。以前在 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;

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »