实现效果如图:
以下为实现代码:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta
name = "viewport"
content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
>
<meta
http-equiv = "X-UA-Compatible"
content = "ie=edge"
>
<title>Document</title>
<style>
.box{
margin:auto;
border: 4px dashed palevioletred;
width: 400px;
min-height: 48px;
overflow: hidden;
display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
position: relative;
transition:0.5s all linear;
border-radius: 8px;
}
p{
margin: 0;
user-select: none;
}
.btn{
position: absolute;
bottom: 0;
right: 0;
padding-left: 60px;
background: linear-gradient(to right, transparent, #ffffff 60%);
user-select: none;
cursor: pointer;
color: #0486fc;
border: none;
}
.sp{
user-select: none;
cursor: pointer;
color: #0486fc;
border: none;
}
</style>
</head>
<body>
<div class="box">
<p>小黄兔是一只多愁善感对生活充满热情期待生活有变化的一只兔子；而绿薄荷是一只看似稳重实则不然对朋友包容性超强的青蛙，他们生活在同一片森林里，是一对无话不谈的好朋友；这对好朋友在一起总会发生好玩有趣的故事；小黄兔负责给平常的生活加点料，而绿薄荷负责平息各种惊险之后让生活回归正常，并包容和接纳朋友的种种。比如写信交笔友事件，小黄兔就像一个小小哲学家思考着“想那些住在别的森林里的动物，说不定有谁可以和我做朋友，可是我却一直没有机会认识”，绿薄荷是行动派立提义写信交笔友，却收到一只鬣蜥，听名字以为是大型的食肉动物他两被吓一跳。
<span class="btn">...展开</span>
</p>
</div>
</body>
<script>
let box=document.querySelector('.box');
let btn=document.querySelector('span');
let text=document.querySelector('p');
console.log(text.clientHeight);//48
console.log(text.scrollHeight);//82
if ( text.scrollHeight> text.clientHeight){//文本高度(包括溢出)>文本像素高度
let i=0;
btn.addEventListener('click',function () {
if(i%2===0){
box.style.display='flex';
btn.innerHTML='收起';
btn.className='sp'
//通过改变按钮类名实现定位
}else{
box.style.display='-webkit-box';
btn.innerHTML='...展开';
btn.className='btn';
}
i++;
})
}else{
btn.style.display='none';
}
</script>
</html>
主要实现难点:展开按钮固定位于文本最后一排右下,收起按钮则位于文本末尾最后一个字右边. 前者利用css绝对定位实现,后者则利用js改变按钮类名实现
