最近的一个项目中要使文字垂直排列，也就是运用了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. Servlet监听器详解及举例

    监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. 监听器原理 监听原理 1.存在事件源 ...

  2. 小程序 读取照片 EXIF 元信息

    安装 exif.js npm install exif-js --save UI <button type="primary" @click="onExif&quo ...

  3. sed命令的使用

    1.sed格式.理解 (1)找谁  干什么 (2)想找谁,就把谁保护起来 2.sed基本操作 操作文件oldboy.txt I am lizhenya teacher! I teach linux. ...

  4. Linux常用命令 - tail命令详解

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 实时刷 ...

  5. Tars | 第6篇 基于TarsGo Subset路由规则的Java JDK实现方式（下）

    目录 前言 1. 修改.tars协议文件 1.1 Java源码位置及逻辑分析 1.2 Java语言实现方式 1.3 通过协议文件自动生成代码 1.4 变更代码的路径 2. [核心]增添Subset核心 ...

  6. Sentry 后端监控 - 最佳实践(官方教程)

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  7. Typescript详解

    typescript由微软开发的一款开源编程语言. ts是jacascript的超集,遵循ES6,ES5规范,ts扩展了js的语法. ts更像后端java,c#这样的面向对象的语言,可以让js开发大型 ...

  8. error: subscripted value is neither array nor pointer问题解决

    在运行程序的时候报错:error: subscripted value is neither array nor pointer 原因分析:下标值不符合数组或指针要求,即操作的对象不允许有下标值. 出 ...

  9. Powershell 命令行安装 Windows 作业系统

    使用 powershell 完全安装或重灌 windows 作业系统的正确姿势 note:完全使用 powershell 指令,绝非在 powershell 终端下键入传统的 cmd 指令使用传统的 ...

  10. Docker系列（21）- DockerFile介绍

    DockerFile介绍 dockerfile是用来构建docker镜像的文件!命令参数脚本! 构建步骤 编写一个dockerfile文件 docker build构建成为一个镜像 docker ru ...