最近的一个项目中要使文字垂直排列，也就是运用了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. 小程序 mpvue page "xxx" has not been registered yet

    新增了几个页面,改了下目录结构,就开始报这个错. 重启了几次不管用,google 一番也无果. 灵机一动试一下 build npm run build build 版本没报错,OK 然后 $ rm - ...

  2. 集合框架2- ArrayList

    其实 Java 集合框架也叫做容器,主要由两大接口派生而来,一个是 collection,主要存放对象的集合.另外一个是Map, 存储着键值对(两个对象)的映射表. 下面就来说说 List接口,Lis ...

  3. Java编程：为什么Class实例可以不是全局唯一

    通过定义两个类加载器加载同一字节码文件来证明Class实例为什么不是全局唯一的 1.将一个名为Demo(没有后缀)的字节码文件放在D盘根目录 2.定义两个类加载器 自定义ClassLoader三要素: ...

  4. Django的form组件——ModelForm实战

    模型: from django.db import models class Book(models.Model): book_name = models.CharField(max_length=3 ...

  5. ubantu与CentOS虚拟机之间搭建GRE隧道

    Author       : Email         : vip_13031075266@163.com Date          : 2020.01.23 Copyright : 未经同意不得 ...

  6. openswan框架和编译时说明

    刚开始学习openswan项目代码时,自己尝试了在虚拟机上编译.安装.运行openswan代码,由于当时刚开始学习openswan代码,因此对于其构成并不清楚,在编译.运行过程中有了问题,基本是通过百 ...

  7. 传递集合参数以及SpringMVC和Struts2的区别

    一.传递集合参数 二.和Struts2的区别 Struts2是基于类封装请求参数,SpringMVC是基于方法封装参数:

  8. ElasticSearch集成SpringData史上最全查询教程

    1.简单介绍 springboot 使用springdata操作es,ElasticsearchRepository使用QueryBuilder构造查询条件 2.集成es //maven集成 < ...

  9. 解决vscode可以编译通过c++项目，但头文件有红色波浪线的问题

    解决vscode可以编译通过c++项目,但头文件有红色波浪线的问题 一.问题描述 我是在Ubuntu 16.04的环境下,用vscode写代码的,一般不使用vscode自带的编译环境,而是用cmake ...

  10. 知乎vscode插件修改和重新编译

    需求来源 vscode插件修改代码要怎样重新编译并安装到vscode中? 起源于我使用一个vscode插件,它可以在vscode中发布文章到知乎上,然后我修改了插件的部分源代码,希望在vscode中安 ...