对于英文和符号超出容器对齐方法

最近在做小程序项目，发现了一个问题，就是当你输入中文时候是不会超出容器的，只要输入英文字母或者符号就会超出容器限制。先贴上效果图：

贴上代码：

Html:

             

 <view class="messageList">
                    <view class="listItem" @click="delMsg(i,idx)" v-for="(i,idx) in messageList" :key="idx">
                        <view class="leaver">
                            <image :src="i.headimg" mode=""></image>
                        </view>
                        <view class="message">
                            <view class="message-top">
                                <view class="userName">{{i.nickname}}</view>
                                <view class="timeLine">{{i.create_at}}</view>
                            </view>
                            <view class="userMsg">{{i.content}}</view>
                        </view>
                    </view>
                </view>

下面是CSS:

.messageList {
                box-sizing: border-box;
                margin: 40rpx 0;

                .listItem {
                    border-top: 1px solid #efefef;
                    padding: 20rpx 0;
                    font-size: 22rpx;
                    display: flex;

                    &:first-child {
                        border-top: none;
                    }

                    .leaver {
                        image {
                            width: 50rpx;
                            height: 50rpx;
                            border-radius: 50%;
                            overflow: hidden;
                        }
                    }

                    .message {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        // justify-content: space-between;
                        margin-left: 20rpx;
                        .message-top {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .userName {
                                // margin-top: 6rpx;
                                font-size: 28rpx;
                                font-weight: 600;
                            }
                            .timeLine{
                                font-size: 28rpx;
                                color: #999999;
                                // font-weight: 600;
                            }
                        }
                        .userMsg {
                            margin-top: 20rpx;
                            font-size: 26rpx;
                        }
                    }
                }
            }

我们修改下userMsg 的样式：

.userMsg {
                            margin-top: 20rpx;
                            font-size: 26rpx;
                            word-break: break-word;
                            word-wrap: break-word;
                            white-space: pre-wrap;
                        }

附上加上之后的效果图：

 

对于这些属性（附上官方解释）：

对于最后一个属性加不加无所谓，为了兼容性还是加上去吧，保险一点！