1.想法：当页面加载完成时，通过元素ID获取段落的高度，设定每行的高度后，就可以判断当段落高度大于3*行高时，显示查看更多按钮并且设置段落高度为3*行高
2.开始动手
html主要代码
<p id="use" class="p_class">
段落内容》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
</p>
<div id="seeMore" onclick="toSeeMore()">
<span>查看更多</span>
</div>
js主要代码
画面加载完成执行
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;
}
