iTakeo

JS控制多行文字超出省略号。

单行文字超出省略号很简单，只要通过css就可以了，如下：

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

单行文字超出省略号，单行文字超出省略号

多行文字超出省略号，也可以通过css来设置，但是只有webkit内核的才支持，Firefox和IE基本跪了。

overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;

多行文字超出省略号，也可以通过css来设置，多行文字超出省略号，也可以通过css来设置，多行文字超出省略号，也可以通过css来设置，多行文字超出省略号，也可以通过css来设置，多行文字超出省略号，也可以通过css来设置

还有一种通过伪类来实现遮盖。效果也还行。

.list:after{
content: ‘…’;
display: block;
padding: 0 20px 1px 45px;
position: absolute;
right: 0px;
bottom:4px;
background: url(“一个渐变的png图片”) repeat-y
}

下面写了一个小插件，使用js来完成超出省略号。下面是调用方法：

//调用
omit.init(‘.page’)

HTML结构如下，可以直接一个元素，里面写内容，也可以包裹一个元素。

<div>多行文字超出省略号，多行文字超出省略号</div>
<div><p>多行文字超出省略号，多行文字超出省略号</p></div>

演示：

js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号

演示2：

js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省略号js处理多行文字省

添加省略号删除省略号

由于使用了querySelector，所以IE7及以下不支持，如果需要支持，请下载源码自己修改：

点击这里下载JS

2015/10/16 0 /

前端

标签: 暂无标签

回到顶部