html段落超过三行显示查看更多

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;

}