html5判断文字超过几行,判断文字数量超过2行 添加展开按钮 未超过两行则不显示按钮 溢出部分显示省略号...

在进行H5页面开发时，项目都要提测了，产品却加了个点击展开和点击收起的需求。。 上知乎看了下 ，也有人有这样的疑问，今天我就把问题给解决啦~

这里就来讲述下我的解决方案：

利用多行溢出实现“展开”“收起”

多行溢出省略Css：

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

设计是这样的。。

点击展开.png

点击收起.png

接下来我来讲讲我的实现

。

。

。

.review{

padding-top: .2rem;

padding-bottom: .1rem;

margin-left: .9rem;

font-size: .32rem;

color:#b85423;

line-height: 1.5em;

position: relative;

}

.ellipsis{

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

.spread{

padding-right: .2rem;

position: absolute;

bottom: .09rem;

right:0;

}

.spread i{

width: .2266rem;

height:.2266rem;

display: inline-block;

vertical-align: middle;

background-image: url(/https/blog.csdn.net/cdn_img/plusSprite.png);

background-repeat: no-repeat;

background-size: .2266rem .72rem;

}

.spread i.plus{

background-position: 0 0;

}

.spread i.reduce{

background-position: 0 -0.4933rem;

}

$('.teacher-review').forEach(function(v,i){

// 引入flexible.js 进行移动端适配

// 根据flexible 获取rem 即 window.rem

if(v.clientHeight > (1.27*window.rem)){

var el = document.createElement('span');

el.innerHTML = '... 点击展开';

el.className = 'spread';

// 由于每条评论相间背景

el.style.backgroundColor = i%2 == 0 ? '#ffca48' : '#ffd358';

v.appendChild(el);

// multi 是显示溢出的标志

$(v).addClass('ellipsis multi')

}

})

// 点击判断收起还是展开

$('.review').on('click','.multi',function(e){

var $this = $(this)

if($this.hasClass('ellipsis')){

$this.removeClass('ellipsis').find('span').html('点击收起');

}else{

$this.addClass('ellipsis').find('span').html('... 点击展开');

}

})

结果是这样的。。。。

image.png

这里讲解下展开收起的思路：

出现展开的情况是因为内容溢出，那内容没溢出就不需要显示“点击展开的按钮啦”，好心烦，突然接到需求，都没心情热饭吃。。

热饭过程中灵感一闪，有了！判断下内容的高度，只要大于指定的高度就能解决溢出显示“点击展开”，不溢出就不显示。

这里的multi class 是为了区分内容溢出还是没溢出~~~~

如果内容显示溢出就加个ellipsis class，一旦点击，判断存在ellipsis class 说明内容溢出啦 ，这时候移除ellipsis class 就展开内容了 是不是很简单。 剩下的就不说了，大家应该都明白了~~

不知道有没有讲明白~

不明白的看代码~~

干活去~

给你一朵花.png

🎄 2019-12-25 圣诞快乐 🎄

为清晰描述问题，小编对原有代码做了删减(移动适配)补充。最终效果详见 Demo，具体代码如下：

.container {

width: 375px;

}

.review:nth-child(2n) {

background: #ffd358;

}

.review:nth-child(2n+1) {

background: #ffca48;

}

.review {

position: relative;

padding: 0 5px;

line-height: 1.5em;

border: 10px solid transparent;

text-align: justify;

font-size: 14px;

color:#b85423;

}

.ellipsis {

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

.collapse {

padding-right: 5px;

position: absolute;

right:0;

bottom: 0;

line-height: 1.5em;

cursor: pointer;

}

.collapse i {

width: 15px;

height: 15px;

margin-top: -3px;

display: inline-block;

vertical-align: middle;

}

.collapse i.icon-reduce {

background-image: url(https://s5.ssl.qhres.com/static/499139252f0ccc1c.svg);

background-size: 100% auto;

}

.collapse i.icon-plus {

background-image: url(https://s4.ssl.qhres.com/static/88905e23e9998e00.svg);

background-size: 100% auto;

}

$(function() {

var collapseDefaultContent = '... 点击展开';

var collapseActiveContent = '点击收起';

Array.from($('.review')).forEach(function(v, i) {

// 1.5: line-height

// 14: font-size

// 2: 超过两行省略

if (v.clientHeight > (1.5 * 14 * 2)) {

var el = document.createElement('span');

el.innerHTML = collapseDefaultContent;

el.className = 'collapse';

// 由于每条评论相间背景

el.style.backgroundColor = i%2 == 0 ? '#ffca48' : '#ffd358';

v.appendChild(el);

// multi 是显示溢出的标志

$(v).addClass('multi ellipsis')

}

})

// 点击判断收起还是展开

$('.multi').on('click', '.collapse', function() {

var $this = $(this)

var $parent = $this.closest('.multi')

if($parent.hasClass('ellipsis')) {

$parent.removeClass('ellipsis');

$this.html(collapseActiveContent);

} else {

$parent.addClass('ellipsis');

$this.html(collapseDefaultContent);

}

})

})