CSS 实现多行文本“展开收起”右下角环绕效果

uniapp

<view style=" display: flex;">
    <view class="text" :style="{'-webkit-line-clamp':open ? 999 :3}">
        <view class="btn" @click="open=!open">{{open ? '收起':'展开'}}</view>
        浮动元素是如何定位的
        正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
    </view>
</view>

export default {
    data() {
        return {
            open: false
        }
    }
};

<style lang="scss">
    .text {
        padding: 0 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;

        &::before {
            content: '';
            float: right;
            width: 0;
            height: calc(100% - 40rpx);
        }
    }

    .btn {
        width: 60rpx;
        height: 30rpx;
        background-color: #fff;
        font-size: 24rpx;
        line-height: 30rpx;
        text-align: center;
        border-radius: 10rpx;
        float: right;
        clear: both;
    }
</style>

参考链接：juejin.cn/post/696390…