小程序-实现竖排文字
时间:2022-04-25
本文章向大家介绍小程序-实现竖排文字,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近我在做一个诗词类的小程序:《诗词屋》,已经上线。因为古文有从上到下,从右到左阅读和书写的习惯,所以我设计了一个摘录页面,如下:
整体布局就是按照古代人阅读习惯来的,有点韵味。但是我们如何实现上面那种垂直布局呢?
模板文件如下:
-
<view
class="mod-text">
-
<text>窗前明月光</text>
-
<text>疑是地上霜</text>
</view>
那样式该如何写呢?看需求应该和方向或者书写模式有关。也就是CSS中的 writing-mode。
这个属性比较生僻,在一般业务中很少遇到,如果没有见过也不容易想到。它的语法:
/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;
初始值是:horizontal-tb。从字面意思我们也应该能猜到什么意思,比如:vertical-rl,就是垂直方向从上到下,水平方向从右到左。
预期表现:
从上图,我们应该能看出,使用 vertical-xx 基本可以实现我们的效果,那我们应该使用哪个呢?
先使用vertical-lr貌似这个接近我们的预期从左向右。那我们该把这个属性放在哪个元素上呢?从它的定义来看,它可以决定子元素的排列方向,那应该放到父元素上即.mod-text
wxss如下:
.mod-text{
writing-mod:vertical-rl;
}
可是效果并不是我们期望的:
如果想不到此时的布局流向,你可以多加一些字:
如果还是别扭,你可以向右歪脖子或旋转图片:
定高是可以实现,但古诗一句的字数是不等的,貌似不够灵活。
仔细想想,我们只要使每一句的古诗占据一列不就行了吗?回忆一下在水平排列时,如何使元素占据一行?就是使元素块级化不就行了。
.mod-text text{
-
display:block;
}
这就达到了预期的效果:
明天继续说一下另一种解法,如果你有好的方法,可以留言!
- Java常用工具类之Excel导出
- js行内式遇到的一些问题 DOM对象和jq对象转换的问题
- JavaWeb(三)servlet
- PL/SQL 编程(三 )程序包和包体,触发器,视图,索引
- 一次关于js事件出发机制反常的解决记录
- Java综合题目
- Ubuntu 16.04下为TITAN 1080 显卡安装驱动及Gpu版TensorFlow|深度学习
- 给新生成的节点(动态生成节点)绑定事件方法总结
- JavaWeb(四)JDBC操作Oracle
- JavaWeb(六)Listener监听器
- JSP引入 - UEditor 富文本编辑器
- JavaWeb(五)Filter过滤器
- JavaWeb(七)Cookie,EL表达式,标准标签库
- JavaWeb(八)JQuery
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法