最近的一个项目中要使文字垂直排列，也就是运用了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. vue 封装 axios 和 各类的请求，以及引入 .vue 文件中使用

    //src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可   /**  * ajax请求配置  */ import axios fro ...

  2. 并发编程之：JUC并发控制工具

    大家好,我是小黑,一个在互联网苟且偷生的农民工. 在上一期我们讲了Thread.join()方法和CountDownLatch,这两者都可以做到等待一个线程执行完毕之后当前线程继续执行,并且Count ...

  3. 【进阶之路】持续集成、持续交付与持续部署（CI/CD）

    由来 记得7月份刚刚换工作的时候,中午和老大一起去吃饭,回来的路上老大问我:"南橘,CI/CD有没有研究过?" 我隐隐约约在哪里听过这个名词,但是又想不起来,秉着实事求是的态度,我 ...

  4. Docker（41）- Portainer 可视化面板安装

    Portainer docker run -d -p 8080:9000 \ --restart=always -v /var/run/docker.sock:/var/run/docker.sock ...

  5. 一行Java代码实现游戏中交换装备

    摘要:JDK 1.5 开始 JUC 包下提供的 Exchanger 类可用于两个线程之间交换信息. 本文分享自华为云社区<一行Java代码实现两玩家交换装备[并发编程]>,作者:陈皮的Ja ...

  6. IO流实现简单的文件的剪切

    思路: 判断 即将 复制的文件是文件夹还是文件 遍历需要复制的源文件夹 如果是文件夹,就通过流创建一个同样的子文件夹 如果是文件,就复制过去 接下来上代码 public class Demo1 { p ...

  7. php 圆角图片处理

    /** * 把图片转换成圆角 * @param string $imgpath * @param int $radius * @return resource */ public function r ...

  8. Java多线程-1(3)

    本份随记主要为狂神老师的Java多线程教学的学习笔记,记载了视频中一些有关基础概念以及部分代码示例.随机分为1-3共三份,知识点记录的不是很深入,以后的学习过程中随时补充. 1 有关基础概念 1.1 ...

  9. .Net Core with 微服务 - 分布式事务 - 可靠消息最终一致性

    前面我们讲了分布式事务的2PC.3PC , TCC 的原理.这些事务其实都在尽力的模拟数据库的事务,我们可以简单的认为他们是一个同步行的事务.特别是 2PC,3PC 他们完全利用数据库的事务能力,在一 ...

  10. html 随笔-水平控件不对齐的解决办法

    分别在左右两个控件的css代码中加上 vertical-align:top. 便可对齐:(推荐使用,因为这样可以避免脱标流). 来源: https://www.jianshu.com/p/f00d51 ...