[转载]CSS3实现文本垂直排列
最近的一个项目中要使文字垂直排列，也就是运用了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实现文本垂直排列的更多相关文章
- CSS3实现文本垂直排列
最近的一个项目中要使文字垂直排列,也就是运用了CSS的writing-mode属性. writing-mode最初时ie中支持的一个属性,后来在CSS3中增添了这一新的属性,所以在ie中和其他浏览器中 ...
- 使用CSS3改变文本选中的默认颜色——张鑫旭
关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3. ...
- /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap
<meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...
- 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
- UILabel文本垂直顶部对齐的方法
也不知道为什么UILabel本身没有提供文本垂直顶部对齐的方法,真的有点晕.我们创建一个简单的UILabel来看看: [box type="info"] UILabel *myLa ...
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3制作的垂直口风琴1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 新增文本样式
CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...
- 转载——CSS3 Object-fit和Object-position
在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题.往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码: img { max-width: 100%; heig ...
随机推荐
- android activity pass data to accessibilityservice 数据传递
不同类型的 service 传递数据的方式不同,accessibilityservice 运行在独立进程,且被系统接管,比较特别 在 AccessibilityService 的 onCreate 内 ...
- 如何实现LRU缓存？
面试官:来了,老弟,LRU缓存实现一下? 我:直接LinkedHashMap就好了. 面试官:不要用现有的实现,自己实现一个. 我:..... 面试官:回去等消息吧.... 大家好,我是程序员学长,今 ...
- Docker容器管理——Docker容器常用命令
1.查看所有的容器 docker ps 2.查看运行的容器 docker ps -a 3.启动.停止.重启docker容器 docker start ... docker stop ... docke ...
- noip模拟18
\(\color{white}{\mathbb{曲径通幽,星汉隐约,缥缈灯影,朦胧缺月,名之以:薄雾}}\) 放眼望去前十被我弃掉的 \(t2\) 基本都上85了-- 开考就以为 \(t2\) 是个大 ...
- squid缓存代理
目录: 一.Squid 代理服务器 二.Squid 代理安装 三.搭建传统代理 四.搭建透明代理 五.ACL访问控制 六.Squid日志分析 七.反向代理 一.Squid 代理服务器Squid 主要提 ...
- WPF Prism8.0中注册Nlog日志服务
无论是Nlog还是Serilog, 它们都提供了如何快速在各类应用程序当中的快速使用方法. 尽管,你现在无论是在WPF或者ASP.NET Core当中, 都可以使用ServiceCollection来 ...
- 详解C3P0（数据库连接池）
详解C3P0(数据库连接池) 快速索引 一.基本定义 二.使用C3P0(数据库连接池)的必要性 1.JDBC传统模式开发存在的主要问题 三.数据库连接池的详细说明 四.使用连接池的明显优势 1.资源的 ...
- angularjs $http.get 和 $http.post 传递参数
$http.get请求数据的格式 $http.get(URL,{ params: { "id":id } }) .success(function(response, status ...
- 用Python做了个奇奇怪怪的打篮球游戏
一.前言 准备编写一个篮球游戏,运动员带球跑,跳起投篮.在每帧图片中包括运动员和篮球,使用多帧图片,实现运动员运球跑动的效果. 运动员运球跑动作每帧图形的宽和高可能不同,例如,跨一大步,和两腿并拢,其 ...
- Java基础系列（8）- 数据类型
数据类型 强类型语言 要求变量的使用合乎规定,所有的变量都必须先定义才能使用.Java是强类型语言. 弱类型语言 变量定义比较随意,比如"12"+3,可以是int型123,也可以是 ...