要实现尾部缩进效果，文字过多，展示查看更多按钮，点击查看更多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.text-spread-container {
position: relative;
overflow: hidden;
height: 100px;
}
.text {
color: #1f1f1f;
line-height: 26px;
}
.btn {
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
background-color: #fff;
color: #f00;
}
.btn:before {
position: absolute;
right: 100%;
content: "";
width: 16px;
height: 22px;
background-image: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0));
}
</style>
<body>
<div class="text-spread-container">
<div class="text">
我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字
</div>
<div class="btn">...查看更多</div>
</div>
</body>
<script>
document.querySelector('.btn').onclick = function () {
const height = document.querySelector('.text-spread-container').style.height
document.querySelector('.text-spread-container').style.height = height == 'unset' ? '100px' : 'unset'
}
</script>
</html>
image.png
image.png
网友评论