jQuery实现判断文本行数

现在有一个项目,需要我去判断一个div中的文本有几行。如果超过两行则省略并显示省略号,同时会弹出一个显示全部按钮,点击按钮加载全部文本。

多行省略的话用CSS就可以实现了。

以下是超过两行省略的CSS代码,即:

.webkit2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
}

然后就是超出显示按钮了,个人一开始判断行数是用网上找来的轮子,但是使用的时候感觉效果不是很好,在字数刚刚超出第二行的时候会出现有省略号但是不会出现加载更多按钮的情况。行数显示一直是1.9853333...估计是轮子和webkit盒子的效果有点冲突。后来就自己写了一个,效果也不错,反正比轮子好,起码没有bug。这个思路是先用jquery获取字体的大小和一行的宽度,然后相除就能得出一行可以有多少字(要记得向下取整),然后再获取文本域中的文本长度,用文本长度除以每行可以有的字数,这样就能得出一共有几行了。

//标题的字数是否超出两行
            var lineWidth = $('.ye1-div3-Rtext1').width();//获取一行的宽度
            var textWidth = $('.ye1-div3-Rtext1').css('font-size').slice(0, -2);//获取字体的宽度
            var hangHeight = parseInt(lineWidth / textWidth);//两者相除取整获得每行可以有多少字
            var textHeight = $('.headone').text();//获取元素中的文本
            textHeight = textHeight.length;//获取文本的长度
            var hangSum = (textHeight - 39) / hangHeight;//文本的长度除以每行字数就是行数,减39是因为似乎文本初始就会由于样式而得到一定的长度,具体减多少可以先不设值求一下元素的长度,没有值的情况下宽度是多少就减多少。
            if (hangSum >= 2) {//如果行数大于或者等于二就弹出加载更多按钮(因为我用来-webkit-的多行省略,所以行数为2也要弹出按钮)
                $('.allOne').css('display', 'block');//按钮设置为显示。
            }
            ;

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值