收藏
回答

cover-view组件中真机上的文本换行问题?求一个解决方案

下面是一个直播类型的弹幕样式,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 这个弹幕列表时,手机上的样式就异常了,特别是中文,在开发者工具上是一切正常的,下面是开发者工具上的效果,都是动态数据:

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

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

最后一次编辑于  2020-08-17
回答关注问题邀请回答
收藏

1 个回答

  • A丶W6
    A丶W6
    2020-08-18

    已经找到解决办法,在需要显示的弹幕元素wxss样式中添加,指定的font-family就能正常显示了

    .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:normal;
        font-family:Consolas,Monospace,'Courier New', Courier;
    }
    .message-nick{
        color:#f4df9e;
        position: absolute;
        top:10rpx;
        left:14rpx;
        font-size:26rpx;
        line-height: 36rpx;
        font-family:Consolas,Monospace,'Courier New', Courier;
    }
    


    开发者工具

    手机效果

    2020-08-18
    有用 3
    回复
登录 后发表内容
问题标签