小程序-实现竖排文字

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

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

模板文件如下:

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

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

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

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

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

预期表现:

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

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

wxss如下:

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

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

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

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

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

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

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

这就达到了预期的效果:

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

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2018-01-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏狮乐园

interview record 20160822

问了一些列范围超级广的问题,不过我感觉大部分问题的答案,面试官还是比较满意的,有一些小问题没有答上来,我觉的并不是因为自己没有能力,其实就是所谓的“约书亚树”道...

973
来自专栏阮一峰的网络日志

字体笔记

昨天,我写了纪录片《Helvetica》的观后感。因为内容与字体有关,我就借这个机会,整理一下关于字体的笔记。

1781
来自专栏cs

学markdown怎能不知道与之相关的html了include <iostream>

<h2>导言</h2> <strong> markdown,hthl都是超文本标记语言,markdown是简化版本的html,兼容html语言,熟悉一下ht...

2414
来自专栏微信终端开发团队的专栏

微信“ 15。。。。。。。。。”来龙去脉

微信 Android 大量用户反馈接收或发送类似“15。。。。”信息会导致微信聊天界面卡死,程序崩溃。我们得知这个问题后,第一时间对这个问题进行了紧急修复并在两...

1.4K3
来自专栏编程

采用DIV+CSS布局对SEO优化有何好处?

DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道。代码精简所带来SEO优化直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完...

2016
来自专栏对角另一面

vue-auto-focus: 控制自动聚焦行为的 vue 指令

在网页的表单中,经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面...

3740
来自专栏前端知识分享

第1天:CSS基本样式

记住:浏览器有默认margin和padding。样式最开始记得一定写:*{margin:0;padding:0}。

1172
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法

1453
来自专栏coding for love

CSS入门

大家都知道,学习前端,有三大神器,html+css+js。如果用武学来比喻,html就好像骨架身躯,学习html就是习武之人所谓的打熬身体,身体底子好,习武才能...

882
来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术之设计规范

以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

4266

扫码关注云+社区

领取腾讯云代金券