css文本排版和内容元素方向

最新推荐文章于 2023-10-24 14:25:22 发布

想要飞翔的小猪

最新推荐文章于 2023-10-24 14:25:22 发布

阅读量1k

点赞数 1

分类专栏： css 文章标签： css writing-mode

本文链接：https://blog.csdn.net/dwb123456123456/article/details/90265630

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下;主要是这个writing-mode

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本排版和元素方向显示</title>
    <style>
        .wm-htb {
            writing-mode: horizontal-tb;
        }

        .wm-vrl {
            writing-mode: vertical-rl;
        }

        .wm-vlr {
            writing-mode: vertical-lr;
        }

        .wm-srl {
            writing-mode: sideways-rl;
        }

        .wm-slr {
            writing-mode: sideways-lr;
        }

        .de-ltr {
            direction: ltr;
        }
        .de-rtl {
            direction: rtl;
        }

        .text-content {
            width: 200px;
            padding: 20px;
            border: 1px solid;
            display: inline-block;
            vertical-align: top;
            padding-right: 100px;
        }
    </style>
</head>

<body>
    <div class="text-content wm-htb">writing-mode: horizontal-tb;</div>
    <div class="text-content wm-vrl">writing-mode: vertical-rl;</div>
    <div class="text-content wm-vlr">writing-mode: vertical-lr;</div>
    <div class="text-content wm-srl">writing-mode: sideways-rl;</div>
    <div class="text-content wm-slr">writing-mode: sideways-lr;</div>
    <br>
    <div class="text-content de-ltr">writing-mode: sideways-lr;</div>
    <div class="text-content de-rtl">writing-mode: sideways-lr;</div>
</body>

</html>

想要飞翔的小猪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css文本排版和内容元素方向

今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下;主要是这个writing-mode<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...
复制链接

扫一扫