css展开收起

用uniapp写的案例
方案1:

截屏2021-12-22 下午1.48.05.png 截屏2021-12-22 下午1.48.43.png

<template>
    <view>
        <view class="Express">
            <view class="info">
                <view :class="{hide:!iSinfo}">
                    {{str}}
                </view>
                <text @tap="showinfo" v-if="!iSinfo">展开</text>
            </view>
            <view @tap="showinfo" v-if="iSinfo" class="hidebtn">收起</view>
        </view>
    </view>
</template>

<script>
    const str =
        '建文瑞4u3ui3问放假了放假额外利润为金额来看几建文若无天了我几天我金额来看几问题了我几天我我金额看了几天看了我几天离开建文立刻就特为克雷特加问题我季塔连科几天离开问题建文立刻金额他建文立刻天他建文立刻天金额看他我金额同款丽娟特可怜天金额看了他金额天论文课题为克雷特加额外同款4 ➕i图4i哦天4哦额看来我季塔连科我今天看了我他'

    data() {
            return {
                str,
                iSinfo: false
            };
        },
        methods: {
            showinfo() {
                this.iSinfo = !this.iSinfo
            }
        }
    }
</script>
<style lang="scss">
    page {
        background-color: #FFFFFF;
    }

    .Express {
        padding: 30upx;
        position: relative;
        font-size: 28upx;

        .info {
            view {
                color: rgba(102, 102, 102, 1);
                word-break: break-word; //换行模式
            }

            text {
                width: 80px;
                text-align: right;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
                color: #0078FF;
                position: absolute;
                bottom: 30upx;
                right: 30upx;
            }
        }
    }

    .hidebtn {
        width: 100%;
        text-align: right;
        color: #0078FF;
    }

    .hide {
        word-break: break-word; //换行模式
        overflow: hidden;
        text-overflow: ellipsis; //修剪文字
        display: -webkit-box;
        -webkit-line-clamp: 2; //此处为上限行数
        -webkit-box-orient: vertical;
    }
</style>