<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background: yellowgreen;
　　　　　　　/*文字竖直书写*/
　　　　　　　/*writing-mode: tb-rl;*/
　　　　　　　writing-mode: vertical-rl;
            font-weight: bold;
            font-size: 20px;
            /*字符之间的距离*/
            letter-spacing: 10px;
            /*单词之间的距离*/
            word-spacing: 10px;
        }
    </style>
</head>
<body>
<p>这是一段竖直写的文字 hello world</p>
</body>
</html>

vertical-rl表示文本是垂直方向(vertical)展示，然后阅读的顺序是从右往左(rl:right-left)，跟我们古诗的阅读顺序一致。

vertical-lr表示文本是垂直方向(vertical)展示，然后阅读的顺序还是默认的从左往右(lr:left-right)，也就是仅仅是水平变垂直。

writing-mode，文字竖直书写，字符之间距离，单词之间距离的更多相关文章

  1. html的a标签display:block之后文字竖直居中

    设置行高和a标签的高度一样就能居中,使用line-height

  2. CSS -- 文字竖直居中

    元素的height 和 lineheight 设置为一样即可.

  3. HTML文本/文字竖直方向/纵向显示

    HTML vertical text (Safari, Firefox, Chrome, and Opera) .vText { -moz-transform: rotate(-90deg) tran ...

  4. 三个css属性 设置文字竖直居中

    display: flex; justify-content:center; align-items:Center;

  5. android中自定义view---实现竖直方向的文字功能，文字方向朝上，同时提供接口，判断当前touch的是哪个字符，并改变颜色

    android自定义view,实现竖直方向的文字功能,文字方向朝上,同时提供接口,判断当前touch的是哪个字符,并改变颜色. 由于时间比较仓促,因此没有对代码进行过多的优化,功能远远不如androi ...

  6. css控制竖直文字显示

    假如有一天,你把水平文字看腻味了...... 我建议你不妨试试垂直文字显示,就像这样: 我 是 竖 直 显 示 的 : 哈哈! 言归正传,怎么把一段话,垂直显示呢? 方法1: //把下面代码另存为ht ...

  7. input竖直的输入框，文字从上到下排列

    有的时候可能会有这样的需求,一个竖直的输入框,输入信息,文字也是从上到下排列: (但是在移动端或用轮播swiper时不起作用,可以用textarea代替input) <!DOCTYPE html ...

  8. CollectionView水平和竖直瀑布流的实现

    最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码 ...

  9. [LeetCode] Binary Tree Vertical Order Traversal 二叉树的竖直遍历

    Given a binary tree, return the vertical order traversal of its nodes' values. (ie, from top to bott ...

随机推荐

  1. 2019-5-15-影子系统让-C++-程序无法运行

    title author date CreateTime categories 影子系统让 C++ 程序无法运行 lindexi 2019-05-15 15:24:35 +0800 2019-05-1 ...

  2. (转)Nginx+Php-fpm运行原理详解

    一.代理与反向代理 现实生活中的例子 1.正向代理:访问google.com 如上图,因为google被墙,我们需要vpn翻墙才能访问google.com. vpn对于“我们”来说,是可以感知到的(我 ...

  3. Qt---坐标系统

    Qt中经常会访问鼠标的位置,qt中将坐标分为局部坐标,与全局坐标.局部坐标用pos表示,全局坐标用globalPos表示. pos与globalPos区别: globalPos:widget鼠标所在位 ...

  4. QSerialPort类

    一.简介     QSerialPort类是Qt5封装的串口类,可以与串口进行通信.QSerialPortInfo是一个辅助类,提供串口的一些信息,如可用的串口名称,描述,制造商,序列号,串口16位产 ...

  5. poj2407(欧拉函数模板）

    sqrt(n)复杂度 欧拉函数模板 #include <iostream> #include <cstdio> #include <queue> #include ...

  6. 开源的DirectUI界面开发库DUILIB试用demo (Win32程序)

    Demo 第三版源码VC2005工程(附全部.h,ansi/unicode lib,dll),下载地址:http://goo.gl/c0L7Q   开源项目地址:http://code.google. ...

  7. Android之相关术语

    Dalvik: Android特有的虚拟机,和JVM不同,Dalvik虚拟机非常适合在移动终端上使用! AVD: (android virtual machine):安卓虚拟设备,就是安卓的模拟器 A ...

  8. Docker系列(十三)：Kubernetes Service的负载均衡和网络路由的秘密

    Kubernetes Service设计分析 什么是单体程序?所有的模块都在一个进程中 微服务,每一个服务是一个进程的模式 kubernetes中的service其实只是一个概念,是一组相同lable ...

  9. js 倒计时毫秒级别显示

    <html> <head> <style> div{ width:100%; text-align:center; font-size: 14px; } </ ...

  10. vue 实现邮戳边缘

    效果: vue: <template> <div class="couponItem"> <div class="itemLeft" ...