专栏首页前端黑板报小程序-实现竖排文字

小程序-实现竖排文字

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

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

模板文件如下:

  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),作者:楔子

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数据科学最常用流程CRISP-DM,终于有人讲明白了

    作者:约翰·凯莱赫(John D. Kelleher)、布伦丹·蒂尔尼(Brendan Tierney)

    前端黑板报
  • DOM小结

    DOM是针对HTML和XML文档的一个API(应用程序编程入口)。DOM描绘了一个层次化的节点树,允许开发人员添加/移除和修改页面某一部分。 注:从上面的引述中...

    前端黑板报
  • 构建离线web应用(一)

    本文由哔哩哔哩前端工程师 墨白 翻译分享 我喜欢移动app,而且也是那些坚持使用Web技术构建移动应用程序的人之一。 经过技术的不断迭代(可能还有一些其它的东西...

    前端黑板报
  • Jeff Dean谈2020ML:专用芯片、多模态多任务学习,社区不用痴迷SOTA

    这一次的 NeurIPS 大会,Jeff Dean 很忙。他谈了机器学习领域的很多话题,包括谈论机器学习如何应对气候变化,以及机器学习如何重塑系统和半导体等人们...

    机器之心
  • 什么是机器学习?有哪些应用?终于有人讲明白了

    导读:人工智能的快速发展,带动了相关技术的繁荣。近些年,国内外的科技公司对机器学习人才都有大量需求。怎样入行机器学习?本文带你从0开始学起。

    华章科技
  • Caused by: org.springframework.data.mapping.PropertyReferenceException: No property id found for typ

    Caused by: org.springframework.data.mapping.PropertyReferenceException: No prop...

    Arebirth
  • 如何看待机器学习中的“稳定性”?

    前言 机器学习的过程往往被人戏称为“炼丹”,这大概要归功于其中难以估量的不确定性。 在道观(实验室)里,我们可以放心的让算法在丹炉(GPU)上无休无止的炼(...

    AI研习社
  • Google | 机器学习小白教程

    对机器如何自学感到很困惑?这里提供对机器学习的综述以供参考。 最近谷歌的深度学习第二代引擎“TensorFlow”引来众人的关注,但也引来了关于人工智能领域的...

    新智元
  • 数据、学习和模型

    机器学习中有几个关键的概念,这些概念为理解机器学习这个领域奠定了基础。

    白加黑大人
  • 2019年机器学习方面的最新研究

    机器学习的用途正在迅速扩大。到了2019年,在探索使用该技术新方向上已经进行了大量研究。下面收集的是迄今为止在机器学习领域所进行的一些最激动人心的研究。

    云水木石

扫码关注云+社区

领取腾讯云代金券