最近在做小程序项目,发现了一个问题,就是当你输入中文时候是不会超出容器的,只要输入英文字母或者符号就会超出容器限制。先贴上效果图:
贴上代码:
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;
}
附上加上之后的效果图:
对于这些属性(附上官方解释):
对于最后一个属性加不加无所谓,为了兼容性还是加上去吧,保险一点!