小程序-实现竖排文字（二）
前一篇文章《小程序-实现竖排文字》只说了一个解决方案，这次再说一些别的解决方案。
把每一句古诗竖排布局，wxml 代码结构：
<view class="mod-text"> <text>窗前明月光</text> <text>疑是地上霜</text></view>wxss如下：
.mod-text text{ writing-mode:vertical-rl;}因为是每一句一列，所以这里使用 vertical-lr 也可以，但是为了以后句子太长，做高度限制时，折列的时候也是从右向左，建议还是使用 vertical-rl 。经过以上布局以后，貌似没有达到我们的需求：
现在整体从右向左的布局没有实现。
- 若文字是固定的：上下对调一下，调整 wxml :
<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></vie2.dispaly:flex
.mod-text{ display:flex; flex-direction:row-reverse;}
3.direction
.mod-text{ direction:rtl;}点击下图体验
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-01-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读