圖片.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;
            }
}

內(nèi)容自適應效果圖如上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頁面想要實現(xiàn)上圖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;
                }
            }