cover-view中显示开头几个文字样式不同然后文字空间与后面重合

想要实现的效果是模拟器这样的，但是真机上出现问题。主要的代码结构是这样：

<cover-view class=‘message-item’ wx:for=“{{message_list}}”>

    <cover-view class=‘message-name’>{{item.userName}}：</cover-view>

    {{item.messageContent}}

</cover-view>