最近的一个项目中要使文字垂直排列，也就是运用了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>　　　　　　　　　　　　　　　

CSS3实现文本垂直排列的更多相关文章

  1. [转载]CSS3实现文本垂直排列

    最近的一个项目中要使文字垂直排列,也就是运用了CSS的writing-mode属性. writing-mode最初时ie中支持的一个属性,后来在CSS3中增添了这一新的属性,所以在ie中和其他浏览器中 ...

  2. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  3. UILabel文本垂直顶部对齐的方法

    也不知道为什么UILabel本身没有提供文本垂直顶部对齐的方法,真的有点晕.我们创建一个简单的UILabel来看看: [box type="info"] UILabel *myLa ...

  4. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 使用CSS3改变文本选中的默认颜色——张鑫旭

    关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3. ...

  6. CSS3制作的垂直口风琴1

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS3 新增文本样式

    CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...

  8. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  9. 【CSS3】---文本阴影text-shadow

    text-shadow可以用来设置文本的阴影效果. 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时 ...

随机推荐

  1. 如何理解IPD+CMMI+Scrum一体化研发管理解决方案之CMMI篇

    如何快速响应市场的变化,如何推出更有竞争力的产品,如何在竞争中脱颖而出,是国内研发企业普遍面临的核心问题,为了解决这些问题,越来越多的企业开始重视创新与研发管理,加强研发过程的规范化,集成产品开发(I ...

  2. PSP表格记录功能

    关于王者荣耀交流协会的PSP表格记录功能,就是针对我们平时做表格时候遇到问题的简化与解决.这部分功能可以记录我们开始时间,暂停时间,结束时间,并自动计算出各个时间段的净时间.只要你开始工作时点一下开始 ...

  3. Java中的抽象类abstract

    abstract定义抽象类 abstract定义抽象方法,只需要声明,不需要实现 包含抽象方法的类是抽象类 抽象类中可以包含抽象方法,也可以包含普通方法 抽象类不能直接创建,可以定义父类引用变量指向子 ...

  4. Haproxy + Rabbit 集群 简要介绍

    # 两台主机都安装上rabbitMQ yum install -y rabbitmq-server   # 两台主机都配置/etc/hosts文件 192.168.23.10 rabbitmq1 19 ...

  5. SQL 抛出异常的例子 RAISERROR 的使用

    先创建一个procedure 当输入的值不在0-100之间时会报出异常 create proc proc_x @a int as begin ) ,) else select @a end go 测试 ...

  6. CF464C-Substitutes in Number

    题意 开始给出一个长为\(n\)的数字串,有\(m\)次操作按顺序执行,每次把当前数字串中的某一个数码替换成一个数字串\(t\)(可以为空或多位),最后问操作结束后的数字串十进制下模\(10^9+7\ ...

  7. 【bzoj5197】[CERC2017]Gambling Guide 期望dp+堆优化Dijkstra

    题目描述 给定一张n个点,m条双向边的无向图. 你要从1号点走到n号点.当你位于x点时,你需要花1元钱,等概率随机地买到与x相邻的一个点的票,只有通过票才能走到其它点. 每当完成一次交易时,你可以选择 ...

  8. 【Java】JAVA开发人员常见环境工具安装

    1.安装配置JDK1.7:jdk-7u45-windows-x64.exe,环境变量配置:JAVA_HOME---[F:\1024\jdk1.7],CLASSPATH---[.;%JAVA_HOME% ...

  9. QoS专题-第4期-QoS实现之限速

    QoS实现之限速 通过前面几篇介绍,大家都知道了MQC是实现QoS的技术,优先级映射是实现QoS的前提条件.读完之后也许无法直观感觉到QoS是如何提升网络服务质量.今天小编给大家介绍限速,通过实验,可 ...

  10. 【刷题】BZOJ 3365 [Usaco2004 Feb]Distance Statistics 路程统计

    Description 在得知了自己农场的完整地图后(地图形式如前三题所述),约翰又有了新的问题．他提供 一个整数K(1≤K≤109),希望你输出有多少对农场之间的距离是不超过K的． Input 第1 ...