css控制多行文本显示隐藏

原文链接，原文写的太好了，我记录一下自己写了一遍

<style>
    .wrap {
        display: flex;
    }

    .text {
        width: 400px;
        border: 1px solid red;
        overflow: hidden;

        /* display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical; */

        line-height: 50px;
        max-height: 150px;
        position: relative;
    }

    .text::before{
        content: '';
        display: block;
        float: right;
        height: 100%;
        background: #ffffff;
        margin-bottom: -50px;
    }

    .text::after{
        content: '';
        width: 100%;
        height: 100%;
        background: #ffffff;
        position: absolute;
    }

    .btn{
        float: right;
        clear: both;
        text-align: right;
        width: 36px;
        position: relative;
    }

    .btn::before{
        content: '...';
        position: absolute;
        right: 28px;
        color: #333333;
        transform: translateX(-100%);
    }

    .btn::after{
        content: '展开';
    }

    #exp:checked+.text{
        max-height: none;
    }

    #exp:checked+.text .btn::after{
        content: '收起';
    }

    #exp:checked+.text::after{
        visibility: hidden;
    }

    #exp:checked+.text .btn::before{
        visibility: hidden;
    }
</style>

<div class="wrap">
    <input type="checkbox" id="exp">
    <div class="text">
        <!-- <button class="btn">展开</button> -->
        <label class="btn" for="exp"></label>
        浮动元素是如何定位的正如我们前面提到的那样，容器的边框，或者碰到另外一个浮动的元素。
        浮动元素是如何定位的正如我们前面提到的那样，容器的边框，或者碰到另外一个浮动的元素。
        浮动元素是如何定位的正如我们前面提到的那样，容器的边框，或者碰到另外一个浮动的元素。
        浮动元素是如何定位的正如我们前面提到的那样，容器的边框，或者碰到另外一个浮动的元素。
    </div>
</div>