移动端demo

需要设置过最大高度max-height,然后把超出部分隐藏。

判断内容是否超出指定高度，超出就添加,”展开全文”的按钮。

添加按钮点击事件，点击后展开全文。

点击查看全文

*{

margin:0;

padding:0;

}

.wrap{

max-height:14rem; /*设置默认高度*/

overflow: hidden;

position:relative;

visibility: hidden;

}

p{

font-size: 16px;

line-height: 20px;

}

/*展开全文*/

.unfold-field{

display:none;

position:absolute;

font-size: 0;

bottom:0;

width:100%;

height:124px;

z-index: 3;

}

.unfold-field .unflod-field_mask {

height: 78px;

width: 100%;

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff));

background-image: linear-gradient(-180deg,hsla(0,0%,100%,0),#fff);

}

.unfold-field_text{

cursor: pointer;

width:100%;

color: #406599;;

height:46px;

font-size: 0px;

line-height: 46px;

text-align: center;

background:#fff;

}

.unfold-field_text span{

display:inline-block;

font-size: 16px;

height:46px;

line-height: 46px;

}

.unfold-field_text span::after{

content:"";

vertical-align: middle;

background:url(http://c1.adline.com.cn/static/img/bottom.png);

background-size: contain;

background-repeat: no-repeat;

width: 9px;

height: 6px;

display: inline-block;

margin-left: 5px;

}

window.οnlοad=function(){

var unfoldField=document.querySelector(".unfold-field");

var wrapH=document.querySelector(".wrap").offsetHeight;

var wrap=document.querySelector(".wrap");

var contentH=document.querySelector(".content").offsetHeight;

// 如果实际高度大于我们设置的默认高度就把超出的部分隐藏。

if(contentH>wrapH){

unfoldField.style.display="block";

}

wrap.style.visibility="visible";

unfoldField.οnclick=function(){

this.parentNode.removeChild(this);

wrap.style.maxHeight="100%";

wrap.style.visible="visible";

}

}