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

1.想法：当页面加载完成时，通过元素ID获取段落的高度，设定每行的高度后，就可以判断当段落高度大于3*行高时，显示查看更多按钮并且设置段落高度为3*行高

2.开始动手

html主要代码

段落内容》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

查看更多

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;

}