学习目标:
在学习实现微信小程序的评论功能时候,对评论功能的排版,下面是css实现对多行文本的控制
学习内容:
微信小程序的wxss文件的代码片段:
.comment-body {
font-size: 26rpx;
line-height: 26rpx;
color: #666;
background-color: red;
text-align: left;/*文本居左*/
text-indent: 4px;/*字体缩进 */
padding:0 20px ;
}
.comment-txt text {
line-height: 50rpx;
letter-spacing:1px;/*字符间的间距*/
padding-left: 20px;
}
/*注意:commmet-body与comment-txt text之间的层级关系*/
微信小程序wxml文件的代码片段 :
<view class="comment-body">
<view class="comment-txt" wx:if="{{item.content.txt}}">
<text>{{item.content.txt}}</text>
</view>
</view>
效果图:
学习时间:
2021年3月19