<!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. 1.spark核心RDD特点

    RDD(Resilient Distributed Dataset) Spark源码:https://github.com/apache/spark   abstract class RDD[T: C ...

  2. Android基础控件Button的使用

    1.相关属性 Android的按钮有Button和ImageButton(图像按钮),Button extends TextView, ImageButton extends ImageView! a ...

  3. JDK源码阅读--String

    public final class String implements java.io.Serializable, Comparable<String>, CharSequence St ...

  4. js中的继承和重载

      js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...

  5. 第一周——clone项目到本地

    公司使用的是git进行version control,代码托管在gitlab. 按照公司规范注册了gitlab账号, 漫长的等待clone到本地~ 然而,还是有问题,jar包下载不完全(公司网速dow ...

  6. 使用scrapy框架来进行抓取的原因

    在python爬虫中:使用requests + selenium就可以解决将近90%的爬虫需求,那么scrapy就是解决剩下10%的吗? 这个显然不是这样的,scrapy框架是为了让我们的爬虫更强大. ...

  7. 使用Colaboratory的免费GPU训练神经网络

    1 Colaboratory 介绍 Colaboratory 是一个 Google 研究项目,旨在帮助传播机器学习培训和研究成果.它是一个 Jupyter 笔记本环境,不需要进行任何设置就可以使用,并 ...

  8. 移动端video视频播放问题

    1.视频播放后自动全屏 video添加playsinline  webkit-playsinline属性 2.安卓暂停或播放完毕不能滑动 通过js判断机型,安卓去掉controls属性,ios保留co ...

  9. phpqrcode.php 生成二维码图片用于推广

    <?php /* * PHP QR Code encoder * * This file contains MERGED version of PHP QR Code library. * It ...

  10. 关于mysql8授权的问题，mysql萌新小白采坑记录

    记录本人第一次使用mysql时踩的坑,因为我从官网下载最新的版本8.0.15msi版本的,直接下一步下一步安装完成之后,本地访问正常,然后服务器安装访问也正常.然后本地连接服务器上的mysql时报错. ...