最近的一个项目中要使文字垂直排列，也就是运用了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. Reinforcement Learning 强化学习入门

    https://www.zhihu.com/question/277325426 https://github.com/jinglescode/reinforcement-learning-tic-t ...

  2. 【CSS】计数器

    抄自B站Up主CodingStartup起码课 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. Flask（3）- Flask 中的 HTTP 方法

    查看 app.route() 源代码 def route(self, rule: str, **options: t.Any) -> t.Callable: """ ...

  4. C# List集合类常用操作：四、删除

    Clear() 从 List<T> 中移除所有元素. List<Employees> employees = new List<Employees>(); empl ...

  5. python库--tensorflow--scope命名方式

    方法   参数 说明 .name_scope() with...: name 在其下使用Variable, 变量名(V_n)前会被加上'name/...'且相同V_n会自动添加后缀加以区分, 使用ge ...

  6. BF算法（串模式匹配算法）

    主串和子串 主串与子串:如果串 A(如 "shujujiegou")中包含有串 B(如 "ju"),则称串 A 为主串,串 B 为子串.主串与子串之间的关系可简 ...

  7. CORS跨域请求规则以及在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  8. Java面向对象系列（12）- Static关键字讲解

    场景一:静态变量 package oop.demo07; public class Student { private static int age;//静态的变量 一般多线程用的比较多 privat ...

  9. xadmin使用富文本

    环境:pycharm django1.11.20 python2.7 后台xadmin(根据网络各种资料实现) 本教程接上篇如何安装 xadmin,如何不清楚,请看上一篇(django安装xadmin ...

  10. JAVA-java内存分配

    二.java-class的内存分配 三.JAVA string类特别之处 String 通过构造方法创建是在堆内存中, 通过直接赋值对象是在方法区的常量里 四.字符串做拼接 非常耗时和浪费内存的原因 ...