UNI-APP评论他人消息怎么换行展示?
<view class="flex_a fz13px" v-for="item in 12" :key="item.commentID">
<view class="comment-item">
<text class="user-name">王昭君</text>
<text>回复</text>
<text class="user-name">周幽王</text>
<text>:</text>
<text>你干啥子?</text>
<!-- 额外的文本,如果需要分行展示,可以将其放入单独的 <text> 标签或 <view> 标签中 -->
<text>退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退退</text>
</view>
</view>
关键css代码样式
/* 在 <style> 标签中定义CSS类 */
.comment-item {
white-space: pre-wrap;
/* 保留空白符序列,包括换行符 */
word-wrap: break-word;
/* 长单词也能换行 */
margin: 0 0 10rpx 0;
/* 根据需要添加外边距 */
// border-bottom: 1px solid #ccc;
/* 添加边框,根据需要调整 */
text:nth-child(2){
margin: 0 5rpx;
}
}
.user-name {
color: rgba(15, 59, 127, 1);
/* 用户名颜色 */
}
/* 其他需要的样式类 */