1.想法：當(dāng)頁面加載完成時(shí)，通過元素ID獲取段落的高度，設(shè)定每行的高度后，就可以判斷當(dāng)段落高度大于3*行高時(shí)，顯示查看更多按鈕并且設(shè)置段落高度為3*行高

2.開始動(dòng)手

html主要代碼

<p id="use" class="p_class">

段落內(nèi)容》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

</p>

<div id="seeMore" onclick="toSeeMore()">

<span>查看更多</span>

</div>

js主要代碼

畫面加載完成執(zhí)行

var height = doucment.getElementById('use').offsetHeight;//獲取段落高度

var seeClass = document.querySelectorAll('#use');//獲取段落的class

if(height > 75){//每行高度25

? ? $("#seeMore").show();

????seeClass[0].className = 'p_class min-height';

}else{

? ???$("#seeMore").hide();

????seeClass[0].className = 'p_class';

}

//查看更多方法

function toSeeMore（）{

? ??$("#seeMore").hide();

????var seeClass = document.querySelectorAll('#use');//獲取段落的class

????seeClass[0].className = 'p_class';

}

css代碼

.min-height{

? ? height:5.4rem;

????overflow:hidden;

}

.p_class{

? ? line-height:1.8rem;

????font-size:14px;

}