实现的页面效果如下:
wxml文件内容:(微信小程序的开发)
<view class='tan-msg'>
<view class='item-msg'>
<text>交易:</text>
<text>{{chainTxid}}</text>
</view>
<view class='item-msg' style="padding: 0rpx 20rpx 8rpx 158rpx;">
<text>blockHash:</text>
<text>{{blockHash}}</text>
</view>
</view>
wxss的样式:
不是微信小程序将rpx换成px,rpx是相对的像素
padding: 0rpx 20rpx 20rpx 100rpx;
笔记:在CSS中,padding
属性用于设置元素的内边距。padding
的值可以有一个到四个值,分别代表上、右、下、左的内边距。这些值的顺序是顺时针的,从上方开始,然后顺时针转到右边、下方、左边。
.item-msg{
position: relative;
padding: 0rpx 20rpx 8rpx 100rpx;
/*这个左边的100rpx是留给左边的标签的。这样左边的那个就有50px空间。 */
/*不是微信小程序将rpx换成px */
}
/*第一个text标签的样式 */
.item-msg text:nth-child(1) {
font-style: normal;
font-weight: bold; /* 设置字体加粗 */
position: absolute; /* 设置定位为绝对定位 */
left: 0px;
}
.tan-msg {
margin:20rpx;
/* text-indent: 40rpx; */
padding: 10rpx; /* 内边距 */
border-radius: 20rpx; /* 边框圆角 */
white-space: pre-wrap; /* 保留空格和换行符 */
word-wrap: break-word; /* 防止内容溢出容器 */
}