单行/多行文本溢出显示省略号
一个图文列表,往往我们不确定文本到底有多少,是英文、中文还是中英文混合,当显示不完文本的时候,我们需要将超出部分隐藏,然后添加一个省略号提示用户还有更多内容。
显示省略号的这个效果感觉只有后端才能实现的样子,但是其实前端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截取就不会出现乱码了。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
火狐暂时是不支持的
多行文本溢出能在火狐下实现么?