writing-mode，文字竖直书写，字符之间距离，单词之间距离

最新推荐文章于 2023-05-06 10:22:22 发布

dican4652

最新推荐文章于 2023-05-06 10:22:22 发布

阅读量979

点赞数

原文链接：http://www.cnblogs.com/xiaobaibubai/p/7381218.html

版权

<!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)，也就是仅仅是水平变垂直。

转载于:https://www.cnblogs.com/xiaobaibubai/p/7381218.html

优惠劵

dican4652

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
writing-mode，文字竖直书写，字符之间距离，单词之间距离

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background: yellowgreen;　　　　　　　...
复制链接

扫一扫