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

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

1.0 CSS3标准

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

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

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

demo

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="utf-8">

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

 6         <style type="text/css">

 7             div{

 8                 border: 1px solid lightblue;

 9                 padding: 5px;

10             }

11             .vertical-text{

12                 -webkit-writing-mode: vertical-rl;

13                 writing-mode: vertical-rl;

14             }

15         </style>

16     </head>

17     <body>

18         <div class="vertical-text">

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

20             2. 文字垂直排列

21         </div>

22     </body>

23 </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。

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="utf-8">

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

 6         <style type="text/css">

 7             div{

 8                 border: 1px solid lightblue;

 9                 padding: 5px;

10                 height: 500px;

11             }

12             .vertical-img{

13                 -webkit-writing-mode: vertical-rl;

14                 -ms-writing-mode: bt-rl;

15                 writing-mode: vertical-rl;

16                 text-align: center;

17             }

18         </style>

19     </head>

20     <body>

21         <div class="vertical-img">

22              <img src="1.jpg"/>

23         </div>

24     </body>

25 </html>

3.2 文字下沉效果

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

 1 <!DOCTYPE html>
 2 <html>

 3     <head>

 4         <meta charset="utf-8">

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

 6         <style type="text/css">

 7             .btn{

 8                 width: 50px;

 9                 height: 50px;

10                 line-height: 50px;

11                 color: white;

12                 text-align: center;

13                 font-size: 16px;;

14                 display: inline-block;

15                 border-radius: 50%;

16                 background: gray;

17                 cursor: pointer;

18             }

19             .btn:active{

20                 text-indent: 2px;

21             }

22             .vertical-text{

23                  writing-mode: tb-rl;

24                 -webkit-writing-mode: vertical-rl;

25                 writing-mode: vertical-rl;

26                 *writing-mode: tb-rl;

27             }

28         </style>

29     </head>

30     <body>

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

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

33     </body>

34 </html>　　　　　　　　　　　　　　　

[转载]CSS3实现文本垂直排列的更多相关文章

  1. CSS3实现文本垂直排列

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

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

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

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

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

  4. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

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

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

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

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

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

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

  8. CSS3 新增文本样式

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

  9. 转载——CSS3 Object-fit和Object-position

    在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题.往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码: img { max-width: 100%; heig ...

随机推荐

  1. openresty(nginx) 配置 http与https使用同一个端口，禁止 IP 直接访问

    准备好工作目录 mkdir work cd work mkdir conf logs 准备好 conf/nginx.conf 配置文件, 把 your.domain 换成你自己的域名 user abc ...

  2. Spring BeanDefinition

    定义 /** * A BeanDefinition describes a bean instance, which has property values, * constructor argume ...

  3. GetX代码生成IDEA插件，超详细功能讲解（透过现象看本质）

    前言 本文章不是写getx框架的使用,而且其代码生成IDEA插件的功能讲解 我之前写过俩篇很长很长的getx文章 一篇入门使用:Flutter GetX使用---简洁的魅力! 一篇原理深度剖析:Flu ...

  4. noip模拟45

    A. 打表 首先注意这道题数组下标从 \(0\) 开始 可以找规律发现是 \(\displaystyle\frac{\sum |a_i-a _ {ans}|}{2^k}\) 那么严谨证明一下: 由于两 ...

  5. javascript（1）简介

    点击查看代码 ### javascript 1.JavaScript简介 javascript是一种轻量级的脚本语言,可以部署在多种环境,最常见的部署环境就是浏览器, 脚本语言: 它不具备开发操作系统 ...

  6. 【Python机器学习实战】决策树与集成学习（六）——集成学习（4）XGBoost原理篇

    XGBoost是陈天奇等人开发的一个开源项目,前文提到XGBoost是GBDT的一种提升和变异形式,其本质上还是一个GBDT,但力争将GBDT的性能发挥到极致,因此这里的X指代的"Extre ...

  7. matlab纹理映射之地球

    %地球 cla reset; load topo; [x,y,z] = sphere(45); s = surface(x,y,z,'facecolor','texturemap','cdata',t ...

  8. AOP快速入门

    一.概念 AOP面向切面编程,是函数式编程的延申,是对OOP的补充: 代理模式:拦截增强作用,增强功能: 1.java继承,纵向共性抽取, 2.横向切面AOP织入增强代码方式 二.原理是通过代理机制, ...

  9. v-for列表渲染之数组变动检测

    1.简单举一个v-for列表渲染例子 <template> <div> <ul> <li v-for="item in items"> ...

  10. HDU1166敌兵布阵（线段树单点更新）

    线段树是一种二叉搜索树,与区间树相似,它将一个区间划分成一些单元区间,每个单元区间对应线段树中的一个叶结点.       对于线段树中的每一个非叶子节点[a,b],它的左儿子表示的区间为[a,(a+b ...