nvue如何实现自适应文本的宽度，还有边缘逐渐透明淡出效果

<template>  
    <view class="wrapper">  
        <view class="message" v-for="(item, index) in messages">  
            <text class="message-text">{{ item }}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                messages: [  
                    'uni-app',  
                    'HBuilder，500万开发者选择的IDE',  
                    'MUI，轻巧、漂亮的前端开源框架',  
                ]  
            }  
        },  
    }  
</script>  

<style lang="scss" scoped>  
    .wrapper {  
        padding: 20rpx;  
        background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));  
        .message {  
            mix-blend-mode: overlay;  
            flex-direction: row;  
            flex-wrap: wrap;  

            .message-text {  
                color: white;  
                background-color: rgba(0, 0, 0, 0.4);  
                margin: 5rpx;  
                padding: 0 15rpx;  
                border-radius: 30rpx;  
                max-width: 400rpx;  
            }  
        }  
    }  
</style>

这里存在一个问题是 nvue 暂时不支持 mix-blend-mode，所以渐变透明可能无法实现

请问你解决了吗？