css 尾部缩进效果

作者: AAA前端 | 来源:发表于2024-05-15 16:03 被阅读0次

Sass 学习笔记
CSS text-indent 文字缩进效果
textarea首行缩进
css段落缩进
文字缩进妙用-CSS隐藏文字的方法
[记录] CSS布局-绝对尾部
CSS文本
Sass
css小知识
web前端入门到实战：css3 loading （缓冲，等待效果

要实现尾部缩进效果，文字过多，展示查看更多按钮，点击查看更多。

<!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>