小程序-实现竖排文字

最近我在做一个诗词类的小程序：《诗词屋》，已经上线。因为古文有从上到下，从右到左阅读和书写的习惯，所以我设计了一个摘录页面，如下：

整体布局就是按照古代人阅读习惯来的，有点韵味。但是我们如何实现上面那种垂直布局呢？

模板文件如下：

1. <view class="mod-text">
2. <text>窗前明月光</text>
3. <text>疑是地上霜</text>
4. </view>

那样式该如何写呢？看需求应该和方向或者书写模式有关。也就是CSS中的 writing-mode。

这个属性比较生僻，在一般业务中很少遇到，如果没有见过也不容易想到。它的语法：

2. /* Keyword values */
3. writing-mode: horizontal-tb;
4. writing-mode: vertical-rl;
5. writing-mode: vertical-lr;
7. /* Global values */
8. writing-mode: inherit;
9. writing-mode: initial;
10. writing-mode: unset;

初始值是：horizontal-tb。从字面意思我们也应该能猜到什么意思，比如：vertical-rl，就是垂直方向从上到下，水平方向从右到左。

预期表现：

从上图，我们应该能看出，使用 vertical-xx 基本可以实现我们的效果,那我们应该使用哪个呢？

先使用vertical-lr貌似这个接近我们的预期从左向右。那我们该把这个属性放在哪个元素上呢？从它的定义来看，它可以决定子元素的排列方向，那应该放到父元素上即.mod-text

wxss如下：

1. .mod-text{
3. writing-mod:vertical-rl;
5. }

可是效果并不是我们期望的：

如果想不到此时的布局流向，你可以多加一些字：

如果还是别扭，你可以向右歪脖子或旋转图片：

定高是可以实现，但古诗一句的字数是不等的，貌似不够灵活。

仔细想想，我们只要使每一句的古诗占据一列不就行了吗？回忆一下在水平排列时，如何使元素占据一行？就是使元素块级化不就行了。

1. .mod-text text{
3. display:block;
5. }

这就达到了预期的效果：

明天继续说一下另一种解法，如果你有好的方法，可以留言！