目前的排版如下:
.verses {
display: flex;
flex-direction: column;
white-space: pre-wrap;
text-align: justify;
word-break: break-all;
}
.verse {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.verse text {
padding: 0 10rpx;
}
你要是个数固定,只能一排显示不换行,那你就给内容夹固定的宽度,然后居中对齐,你要是宽度不能固定,就要想办法把拼音和文字放在一个框里面,然后来处理对齐
<view class="verses"> <view class="verse"> <text>chuang</text><text>qian</text><text>ming</text><text>yue</text><text>guang</text><text>yue</text><text>guang</text> </view> <view class="verse"> <text>窗</text><text>前</text><text>明</text><text>月</text><text>光</text><text>月</text><text>光</text> </view> <view class="verse"> <text>chuang</text><text>qian</text><text>ming</text><text>yue</text><text>guang</text> </view> <view class="verse"> <text>窗</text><text>前</text><text>明</text><text>月</text><text>光</text> </view> </view>
<block wx:for="{{verses}}" wx:for-item="xitem" wx:for-index="xidx" wx:key="*this">
<view class="verse">
<block wx:for="{{xitem}}" wx:for-item="yitem" wx:for-index="yidx" wx:key="*this">
<text>{{yitem}}</text>
</block>
</view>
</block>
</view>
verses:[['chuang','qian','ming','yue','guang'],['床','前','明','月','光']],
},