现在有一个项目,需要我去判断一个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');//按钮设置为显示。
}
;