在CSS3中文本垂直排列效果的方法

发布时间：2023-10-07 14:55:58 所属栏目：语言来源：

导读：最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。

writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有区别。

1.0 CSS3标准

最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。

writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有区别。

1.0 CSS3标准

writing-mode:horizontal-tb;//默认：水平方向，从上到下

writing-mode:vertical-rl; //垂直方向，从右向左

writing-mode:vertical-lr; //垂直方向，从左向右

demo

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS文字垂直排列</title>

        <style type="text/css">

            div{

                border: 1px solid lightblue;

                padding: 5px;

            }

            .vertical-text{

                -webkit-writing-mode: vertical-rl;

                writing-mode: vertical-rl;

            }

        </style>

    </head>

    <body>

        <div class="vertical-text">

            1. 文字垂直排列 <br />

            2. 文字垂直排列

        </div>

    </body>

</html>

2.0 IE中

由于历史的原因，IE下该属性值则显得尤为复杂：

-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

具体可以查看官方文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/

3.0 一些应用

3.1 垂直居中

通过对这个属性的使用，我们可以结合 text-align:center 实现垂直居中或者使用margin: auto。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>CSS3 图片垂直居中</title>

        <style type="text/css">

            div{

                border: 1px solid lightblue;

                padding: 5px;

                height: 500px;

            }

            .vertical-img{

                -webkit-writing-mode: vertical-rl;

                -ms-writing-mode: bt-rl;

                writing-mode: vertical-rl;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <div class="vertical-img">

             <img src="1.jpg"/>

        </div>

    </body>

</html>

3.2 文字下沉效果

我们可以设置文字的writing-mode，然后在结合text-indent来实现文字点击时的下沉效果；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>文字下沉效果</title>

        <style type="text/css">

            .btn{

                width: 50px;

                height: 50px;

                line-height: 50px;

                color: white;

                text-align: center;

                font-size: 16px;;

                display: inline-block;

                border-radius: 50%;

                background: gray;

                cursor: pointer;

            }

            .btn:active{

                text-indent: 2px;

            }

            .vertical-text{

                 writing-mode: tb-rl;

                -webkit-writing-mode: vertical-rl;

                writing-mode: vertical-rl;

                *writing-mode: tb-rl;

            }

        </style>

    </head>

    <body>

        <span>点击领红包</span>

        <p class="vertical-text btn">开 </p>

    </body>

</html>。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!