<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
display: box;
-webkit-box-orient: vertical;
display: -webkit-box;
position: relative;
}
.box-active {
line-clamp: 6;
-webkit-line-clamp: 6;
}
.box-mask {
position: absolute;
bottom: 0px;
left: 0;
height: 20px;
width: 100%;
background: linear-gradient(rgba(228, 221, 221, 0), rgba(228, 221, 221, 0.8));
}
</style>
</head>
<body>
<div>2小时前</div>
<div class="box box-active">
<div class="box-mask"></div>
2023秋冬季新款加厚发热澳离子绒标题显半高领卫衣限制6行客供定制特厚款双面进口澳离子发热面料 跟石墨烯阳离子发热面料一个原理 海外代购限量款 有钱难买
2023秋冬季新款加厚发热澳离子绒标题显半高领卫衣限制6行客供定制特厚款双面进口澳离子发热面料 跟石墨烯阳离子发热面料一个原理 海外代购限量款 有钱难买
2023秋冬季新款加厚发热澳离子绒标题显半高领卫衣限制6行客供定制特厚款双面进口澳离子发热面料 跟石墨烯阳离子发热面料一个原理 海外代购限量款 有钱难买
2023秋冬季新款加厚发热澳离子绒标题显半高领卫衣限制6行客供定制特厚款双面进口澳离子发热面料 跟石墨烯阳离子发热面料一个原理 海外代购限量款 有钱难买
</div>
<script>
let lock=true;
let mask=document.getElementsByClassName('box-mask')[0];
document.getElementsByClassName('box')[0].onclick=function(){
if(lock){
this.className='box';
mask.className=""
}else{
this.className='box box-active'
mask.className="box-mask"
}
lock=!lock;
}
</script>
</body>
</html>
实现遮挡板效果
最新推荐文章于 2024-08-16 20:24:29 发布