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

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

1.0 CSS3标准

writing-mode:horizontal-tb;//默认:水平方向,从上到下
writing-mode:vertical-rl; //垂直方向,从右向左
writing-mode:vertical-lr; //垂直方向,从左向右

demo

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS文字垂直排列</title>
<style type="text/css">
div{
border: 1px solid lightblue;
padding: 5px;
}
.vertical-text{
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="vertical-text">
1. 文字垂直排列 <br />
2. 文字垂直排列
</div>
</body>
</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。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 图片垂直居中</title>
<style type="text/css">
div{
border: 1px solid lightblue;
padding: 5px;
height: 500px;
}
.vertical-img{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: bt-rl;
writing-mode: vertical-rl;
text-align: center;
}
</style>
</head>
<body>
<div class="vertical-img">
<img src="1.jpg"/>
</div>
</body>
</html>

3.2 文字下沉效果

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

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字下沉效果</title>
<style type="text/css">
.btn{
width: 50px;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
font-size: 16px;;
display: inline-block;
border-radius: 50%;
background: gray;
cursor: pointer;
}
.btn:active{
text-indent: 2px;
}
.vertical-text{
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
*writing-mode: tb-rl;
}
</style>
</head>
<body>
<span>点击领红包</span>
<p class="vertical-text btn">开 </p>
</body>
</html>               

CSS3实现文本垂直排列的更多相关文章

  1. [转载]CSS3实现文本垂直排列

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

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

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

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

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

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

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

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

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

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

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

  7. CSS3 新增文本样式

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

  8. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  9. 【CSS3】---文本阴影text-shadow

    text-shadow可以用来设置文本的阴影效果. 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时 ...

随机推荐

  1. win10 tomcat不能访问问题

    问题描述:电脑是Win10系统的,安装了Tomcat后,本机通过80端口能顺利访问.但局域网内的其他机器却无法访问这台电脑的Tomcat服务. 故障分析: 将防火墙关闭后,可以访问,所以问题就出在防火 ...

  2. postman的巨坑 之 cookie

    问题描述:一个后端接口,该接口需要校验登录态,登录态通过cookie中的一个传参k判断.在保证登录的前提下,调用机器A上的接口一直报“用户未登录”,调机器B上就没问题,于是开始排查问题. 解决过程: ...

  3. Notepad++如何多视图(分屏)显示

    Notepad++ v6.6.7 当需要同时查阅或者编辑多个文件时,正是多视图功能大显身手的时候. 可以在你想要在另一边预览操作的文件名字(在工具栏和文件内容之间)上,单击右键,如下图所示,选择移动到 ...

  4. ltnmp 3.0 发布,PHP 开发环境一键安装包

    PHP 开发环境一键安装包, 有个叫lnmp.这个ltnmp看起来更新比较多,开发比较频繁,包括的组件更多. 安装和使用教程:http://www.moqifei.com/ltnmp 标记一下.

  5. 【第五周】alpha发布之小组评论

    对于昨天的阿尔法发布,有那么几点需要说一下: 1,对这次阿尔法发布的过程,我们组还是基本顺利的,由于之前吃过亏,这次我提前试用了一下投影仪,做了些调试,之后的发布过程起码设备上是正常的. 2,我们的项 ...

  6. 第74天:jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. 出现脚本错误或者未正确调用 Page()

    pages/xxxx/xxxx.js 出现脚本错误或者未正确调用 Page() 自己创建的小程序出现上面报错,可能是因为 xxxx.js是一个空文件,所以才会出现未正确调用: 如果是空文件的话,解决办 ...

  8. list+map

    通常读取数据库表中的一条记录后,可以存储于Hashmap变量中:若要读取多条记录,则依次读取每个记录时,先用Hashmap变量存取,然后将Hashmap加到ArrayList变量中. 注意: 每次读取 ...

  9. C++解析-外传篇(1):异常处理深度解析

    0.目录 1.异常的最终处理 2.结束函数terminate() 3.小结 1.异常的最终处理 问题: 如果在main函数中抛出异常会发生什么? 如果异常不处理,最后会传到哪里? 下面的代码的输出什么 ...

  10. 【BZOJ4540】【HNOI2016】序列(莫队)

    [BZOJ4540][HNOI2016]序列(莫队) 题面 BZOJ 洛谷 Description 给定长度为n的序列:a1,a2,-,an,记为a[1:n].类似地,a[l:r](1≤l≤r≤N)是 ...