下面是一个直播类型的弹幕样式，wxml：

   class="message-items" id="message-items" scroll-top="{{scrollTop}}px">
        
            {{item.nick}} {{item.message}}cover-view>
            {{item.nick}} cover-view>
        cover-view>
        
            {{inRoomUser.nick}} 来了cover-view>
            {{inRoomUser.nick}} cover-view>
        cover-view>
    cover-view>

编辑器上wxml的源码总是不全，下面上wxml的图片

wxss

.message-items{
    width:540rpx;
    height:350rpx;
    position: absolute;
    bottom:314rpx;
    left:20rpx;
    overflow-y: scroll;
    z-index:2;
}
.message-item{
    margin-top:10rpx;
    position: relative;
    display: block;
    white-space:normal;
}


.message-info{
    display: inline-block;
    padding:10rpx 14rpx;
    background: rgba(0,0,0,0.1);
    color:#FFF;
    border-radius: 24rpx;
    font-size:26rpx;
    line-height: 36rpx;
    white-space:pre-line;
    vertical-align: top;
}
.message-nick{
    color:#f4df9e;
    position: absolute;
    top:10rpx;
    left:14rpx;
    font-size:26rpx;
    line-height: 36rpx;
}

每次动态新增，msgList 这个弹幕列表时，手机上的样式就异常了，特别是中文，在开发者工具上是一切正常的，下面是开发者工具上的效果，都是动态数据：

下面是手机上测试，每次动态追加数据都是中文排版错误了，输入数字的时候则显示一点点：

这个有什么好的办法能解决吗？