资讯专栏INFORMATION COLUMN

解决多行文本溢出加省略号的兼容性

blair / 2998人阅读

摘要:自己开发的一款插件,为了解决多行结尾处添加省略号的兼容性问题。如何使用这个插件例子为需要添加省略号的元素添加一个类名然后使用该插件。参数这个参数决定需要显示的行数。

自己开发的一款jQuery插件,为了解决多行结尾处添加省略号的兼容性问题。

GitHub: https://github.com/jesseNam/iClamp.js

如何使用这个插件?

  
  

例子

为需要添加省略号的元素添加一个类名 clamp-ellipsis:

Lorem Ipsum is simply dummy text.

然后使用该插件。

$(document).ready(function() {
  var $container = $(".container");
  $container.clamp({clamp: 4});
});
参数

clamp (Number). 这个参数决定需要显示的行数。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81685.html

相关文章

  • CSS实现单行、多行文本溢出显示略号

    摘要:如果实现单行文本的溢出显示省略号同学们应该都知道用属性来,当然还需要加宽度属来兼容部分浏览。接下来重点说一说多行文本溢出显示省略号,如下。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow: hidden; text-overflow:ellipsis; whit...

    番茄西红柿 评论0 收藏0
  • 移动端text-overflow多行文本溢出显示略号(…)

    摘要:大家应该都知道用属性来实现单行文本的溢出显示省略号。但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。,可以用来多行文本的情况下,用省略号隐藏超出范围的文本。 大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; te...

    thekingisalwaysluc 评论0 收藏0
  • 移动端text-overflow多行文本溢出显示略号(…)

    摘要:大家应该都知道用属性来实现单行文本的溢出显示省略号。但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。,可以用来多行文本的情况下,用省略号隐藏超出范围的文本。 大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; te...

    JerryWangSAP 评论0 收藏0
  • CSS - 纯css实现多行文本溢出省略兼容所有浏览器)

    摘要:前言多行文本超出高度限制出现省略号移动端多为内核的有扩展属性但并不是规范中的属性端往往要借助去实现这一效果,但麻烦且不是很靠谱,今天就用纯来实现一个完全兼容的多行省略。 前言 多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果,但麻烦且不是很靠谱,今...

    李义 评论0 收藏0

发表评论

0条评论

blair

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<