多行文本溢出显示省略号
css控制文本溢出隐藏
css兼容最好的就是单行文本溢出省略号了,我们先看下单行的css是怎么设置的:
p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
表示文本不换行,做一行显示,然后文本超出p元素的宽度做省略号显示,且为了兼容低版本浏览器加了超出部分裁剪的css效果。
这个就是一个基本的文本溢出省略号显示的一个效果。
但是,单行已经不能满足我们日常所需了,在一些文本简介中,我们都希望的是能够有多行的显示,再多则做省略号显示,这个功能目前来说,只有webkit内核的浏览器支持这个效果,ie就绝缘了,移动端基本没有问题,因为移动端都是谷歌浏览器的内核,ios不知道,没有设备测试。
我们看看怎么做吧!
p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow : hidden;
}
这里最重要的一条就是-webkit-line-clamp
;他的意思是规定一个元素显示的文本行数,但是这个css属性他不是一个标准的规范,为此还需要其他的属性来配合才能有效。
首先,这个元素要是一个-webkit-box
弹性伸缩盒子,于是设置diplay为该属性。
然后就是盒子内的元素排列方式必须要是从上到下排列,也就是-webkit-box-orient
属性要为vertical
;
然后我们设置-webkit-line-clamp
的行数加上文本超出部分转为省略号才会生效。
但是这个会有一个问题,就是ie不支持,ie11这些都不能还好的兼容,如果你的项目都是针对新型浏览器开发,那么这些都不是问题。
兼容ie
jq插件:dotdotdot-js
jq的这个插件工作方式是在这个容器内,固定高度,超出的部分则做省略号,并且还是自动判断的,容器可以自由变化宽高。
调用
$("#wrapper").dotdotdot({
// 设置,如果没啥设置可以不传参
});
参数以键值对的形式
key | value | 说明 |
---|---|---|
callback | function(){} | 回调函数,当文本截断后触发 |
ellipsis | "\u2026 " | 省略符号 |
height | null/number | 元素的最大高度是多少,不设置则自动计算,输入数字则为像素px单位,用处不大 |
keep | null | Query selector for elements to keep after the ellipsis |
tolerance | 0 | 高度偏差 |
truncate | "word" | 截断文字的方式:node、word、letter |
watch | "window" | 监听什么元素的变化进行更新,这里监听window的窗口变化 |
其实这个插件用起来一般般吧,我的业务需求是指定最多显示几行文字,超出部分隐藏,我并不想去控制容器的大小,我要的是容器固定,文字也显示在一定的高度范围。
这里就需要使用另一个插件了
js插件: Clamp.js
下载地址:clamp
调用:
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});
两个参数,第一个为需要进行省略文字的元素,注意是dom元素,第二个参数为一个对象,对象中有一对键值对,表示超出几行进行省略隐藏。
这就很符合我的需要了,简单方便。
这个除了指定行数我们还有两个参数。
根据元素高度自动截断
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: auto});
指定高度,超过高度进行截断
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: '35px'});
以上就是关于文本溢出省略号的方式了,基本够用了。
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
全部评论 1
木灵鱼儿
FireFox Windows 10