css 实现多行文本展开与折叠

摘要： <div class="content">    <input type=&q...

<div class="content">
    <input type="checkbox" id="check" class="handle">
    <div class="text">
        <label class="btn" for="check"></label>
        <!-- 将进酒 -->
        君不见黄河之水天上来,奔流到海不复回。君不见高堂明镜悲白发,朝如青丝暮成雪。人生得意须尽欢,莫使金樽空对月。天生我材必有用,千金散尽还复来。烹羊宰牛且为乐,会须一饮三百杯。岑夫子,丹丘生,将进酒,君莫停。与君歌一曲,请君为我侧耳听。钟鼓馔玉不足贵,但愿长醉不愿醒。古来圣贤皆寂寞,惟有饮者留其名。陈王昔时宴平乐,斗酒十千恣欢谑。主人何为言少钱,径须沽取对君酌。五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。
    </div>
</div>
<style>
    .content {
        display: flex;
        background-color: #ECF5FF;
        width: 700px;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 6px 11px 1px rgba(0, 0, 0, 0.06);
    }
    .text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        /* 兼容 */
        /* line-height: 1.5;
        max-height: 4.5em; */
        overflow: hidden;
        position: relative;
    }
    .text::before {
        content: '';
        float: right;
        width: 0px;
        height: calc(100% - 16px);
    }
    /* 兼容火狐和苹果浏览器加上省略号 */
    /* .btn::before {
        content: '...';
        position: absolute;
        left: -10px;
        color: #333;
        transform: translateX(-100%)
    } */
    /* 添加覆盖层，在文字较少时覆盖展开按钮*/
    .text::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: #ECF5FF;
    }
    .btn {
        border-radius: 5px;
        border: none;
        color: white;
        background-color: #409EFF;
        float: right;
        clear: both;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        padding: 1px 5px;
        cursor: pointer;
    }
    /* 隐藏单选框 */
    .handle {
        display: none;
    }
    .handle:checked + .text {
        /*设置一个足够大的行数*/
        -webkit-line-clamp: 999;
        /* 兼容 */
        /* max-height: none; */
    }
    .btn::after {
        /*生成文字*/
        content: '展开'
    }
    .handle:checked + .text .btn::after {
        /*生成文字*/
        content: '收起'
    }
    /* 在展开时隐藏覆盖层 */
    .handle:checked + .text::after {
        visibility: hidden;
    }
</style>