CSS3实现文本垂直排列的方法

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

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

1.0 CSS3标准

writing-mode:horizontal -t b;//默认：水 平方 向，从上到下 
writing-mode:vert ical -rl;  //垂直 方向 ，从右向左
writing-mode:vertical-lr;  //垂直方向，从左向右

demo

<!DOCTY PE  ht ML >
<html>
    <head>
        < ;m eta 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下该属性值则显得尤为复杂：

具体可以查看官方文档：

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

3.0 一些应用

3.1 垂直居中

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3 图片垂直居中</title>
        <style type="text/css">
            div{
                border: 1px solid lightblue;
                padding: 5px;
                h ei ght: 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 -i mg">
             <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;;
                dis play : 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是为你收集整理的 CSS3实现文本垂直排列的方法全部内容，希望文章能够帮你解决 CSS3实现文本垂直排列的方法所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于CSS3实现文本垂直排列的方法的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did201591

更新时间：2023-04-27 阅读：26次