有没有更好的方法,处理拼音和汉字上下对齐的排版?
发布于 3 年前 作者 changjun 278 次浏览 来自 官方Issues

目前的排版如下:


.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 回复

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

 <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>
回到顶部