css部分
.container{
position: absolute;
left:10px;
right:10px;
width:810px;
position: relative;
}
.content{
font-size: 16px;
line-height: 1.5;
width: 100%;
color: #000;
word-break: break-all;
text-align: justify;
margin: 0;
position: relative;
}
.collapse .content::after{
content: ' ... ';
position: absolute;
right:16px;
bottom: 0;
/* background: linear-gradient(to right, transparent, #ffffff 50%); */
padding-left: 20px;
}
.collapse .expand-collapse::after{
content: '展开';
display: block;
color:gray;
width: 100%;
text-align: right;
}
.expand .expand-collapse::after{
content: '收缩';
display: block;
color:gray;
width: 100%;
text-align: right;
}
.collapse .content{
overflow: hidden;
height: 50px;
padding: 0;
margin: 0;
}
html部分
<div class="container">
<span class="content">因为有缘我们相聚，成功靠大家努力；我们快乐拼搏、积极乐观、忠诚合作；我们坚定自信，面对挑战绝不退缩；我们永远充满斗志，因为有缘我们相聚，成功靠大家努力；我们快乐拼搏、积极乐观、忠诚合作；我们坚定自信，面对挑战绝不退缩；我们永远充满斗志</span>
<div class="expand-collapse"></div>
</div>
js部分
var expandCollapseDiv;
var containerBoundingClientRect=document.querySelector(".container").getBoundingClientRect();
var contentBoundingClientRect=document.querySelector(".content").getBoundingClientRect();
if(containerBoundingClientRect.height>50){
document.querySelector(".container").setAttribute("class","container collapse");
}else{
document.querySelector(".container").setAttribute("class","container");
document.querySelector(".container").removeChild(document.querySelector(".expand-collapse"))
}
document.querySelector(".container").addEventListener("click",function(){
if(!expandCollapseDiv){
expandCollapseDiv=document.querySelector(".expand-collapse");
}
console.log(event.target);
if(event.target===expandCollapseDiv){
if(document.querySelector(".container").getAttribute("class").split(" ").indexOf("collapse")!==-1){
document.querySelector(".container").setAttribute("class","container expand");
}else{
document.querySelector(".container").setAttribute("class","container collapse");
}
}
},false);