前一篇文章《小程序-实现竖排文字》只说了一个解决方案,这次再说一些别的解决方案。
把每一句古诗竖排布局,wxml 代码结构:
<view class="mod-text"> <text>窗前明月光</text> <text>疑是地上霜</text></view>
wxss如下:
.mod-text text{ writing-mode:vertical-rl;}
因为是每一句一列,所以这里使用 vertical-lr 也可以,但是为了以后句子太长,做高度限制时,折列的时候也是从右向左,建议还是使用 vertical-rl 。经过以上布局以后,貌似没有达到我们的需求:
现在整体从右向左的布局没有实现。
<view class="mod-text"> <text>疑是地上霜</text> <text>窗前明月光</text></view>
2 若文字是接口输出的,假如是个数组:
<view class="mod-text"> <text wx:for="{{tangshi.excerpt}}">{{item}}</text></vie
没事那也有解法方法:只要把 tangshi.excerpt.reverse() 一下就好了。
以上两种情况都有对应的解法,但感觉都不够完美,布局的问题应该交给擅长的 css (wxss) 解决。
下面列举几个我想到的样式解决方案:
1.浮动布局(还得考虑清楚浮动)
<view class="mod-text"> <text wx:for="{{tangshi.excerpt}}">{{item}}</text></vie
2.dispaly:flex
.mod-text{ display:flex; flex-direction:row-reverse;}
3.direction
.mod-text{ direction:rtl;}
点击下图体验