有没有更好的方法，处理拼音和汉字上下对齐的排版？ - WXOPEN Club

目前的排版如下：

.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;

}

2 回复

taoxiulan1 楼3 年前

你要是个数固定，只能一排显示不换行，那你就给内容夹固定的宽度，然后居中对齐，你要是宽度不能固定，就要想办法把拼音和文字放在一个框里面，然后来处理对齐

jun642 楼1 个月前

 <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>