怎么在CSS3中实现文本垂直排列

本篇文章给大家分享的是有关怎么在CSS3中实现文本垂直排列，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

萧县ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

1.0 CSS3标准

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

demo



    
        
        CSS文字垂直排列
        
            div{
                border: 1px solid lightblue;
                padding: 5px;
            }
            .vertical-text{
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
            }
        
    
    
        
            1. 文字垂直排列 
            2. 文字垂直排列

怎么在CSS3中实现文本垂直排列

2.0 IE中

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

具体可以查看官方文档：

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

3.0 一些应用

3.1 垂直居中

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



    
        
        CSS3 图片垂直居中
        
            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;
            }

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

文字下沉效果 .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; } 点击领红包

开

以上就是怎么在CSS3中实现文本垂直排列，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

大橙子网站建设，新征程启航

怎么在CSS3中实现文本垂直排列

其他资讯