图片.png

自动换行效果如上1，vue默认就会换行显示，nvue页面text不能用class必须用style才能自动换行

    <view class="leftView" style="margin-left: 24rpx;">
                        <text class="topText">{{netData.algorithmName}}</text>
                        <text class="midText">{{netData.algorithmCode}}</text>
                        <text class="midText">{{netData.warningTypeName}}</text>
                    </view>
//css
        .leftView {
            display: flex;
            width: 400rpx;
            flex-direction: column;

            .topText {
                width: 400rpx;
                display: flex;
                color: #333333;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                word-break: break-all;// 不识别单词,一行显示不下默认换行
                word-wrap: break-word;//识别单词 不会造成单词断开换行
                margin-top: 24rpx;
            }
}

内容自适应效果图如上2（注意：display: inline-flex；暂不支持nvue，nvue的display只支持flex）

template

    <view class="bottomTextView">
                        <text class="bottomText">{{netData.productName}}</text>
                    </view>

css

    .bottomTextView {
            margin-left: 24rpx;
            margin-top: 10rpx;
            border-radius: 4rpx;
            margin-bottom: 20rpx;
            background-color: rgb(243, 249, 254);
            display: inline-flex;//关键代码

            .bottomText {
                display: flex;
                font-size: 20rpx;
                padding: 5rpx 10rpx;
                color: #3775f6;
                font-family: PingFang SC;
            }
        }

nvue页面想要实现上图2的效果，可以再包裹一层view用overflow: hidden修饰

    <view class="bottomTextBgView">
                        <view class="bottomTextView">
                            <text class="bottomText">{{netData.productName}}</text>
                        </view>
                    </view>
//css
        .bottomTextBgView {
                overflow: hidden;
                display: flex;
                flex-direction: row;
                margin-top: 10rpx;
                margin-bottom: 20rpx;
                margin-left: 24rpx;
            }
            .bottomTextView {
                border-radius: 8rpx;
                align-items: center;
                background-color: rgb(243, 249, 254);
                .bottomText {
                    padding: 5rpx 10rpx;
                    font-size: 20rpx;
                    letter-spacing: 0;
                    font-weight: 500;
                    lines: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #3775f6;
                    font-family: PingFang SC;
                }
            }