[转载]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 ...
随机推荐
- kubernetes部署一个应用程序
文章原文 部署 nginx Deployment 如果你已经完成了Kubernetes的搭建,那我跟我一块来部署第一个应用程序吧.没有完成 Kubernetes 集群搭建的,请参考文档 使用 kube ...
- Onenote实现OCR识别图片
OCR识别推荐两个软件: 1. Tesseract:一个开源的,由谷歌维护的OCR软件. 2. Onenote:微软Office附带或者可以自己独立安装. 3. O ...
- 20210809 Merchant,Equation,Rectangle
做过,但当时咕了 T3 Merchant 先特判 \(t=0\),之后斜率一定会起作用. 考虑最终选择的物品集合,它们的斜率和一定大于 \(0\),因此答案具有单调性,可以二分. 实现的时候注意细节 ...
- Python - 面向对象编程 - 三大特性之封装
简单介绍封装 封装是面向对象编程的一大特点 封装可以被认为是一个保护屏障,防止该类的属性.方法和数据结构被外部随意访问 要访问该类的属性.私有方法.数据结构,必须由指定的方法控制访问 深入理解封装 在 ...
- 初学AOP小结
Spring AOP理解 参考链接 AOP简介 AOP(面向切面编程),可以说时OOP的补充,使用OOP时,我们在日常编写代码的时候,一旦牵涉到大型一点的项目,项目不可或缺的事务处理,安全处理,验证处 ...
- 基于flex布局的header
一.如图 二.思路 1.定义header,设置宽为100%,高为60px,设置绝对定位,使其为漂浮层.在header里添加container,宽设置为版心宽度,并且设置flex布局. 2.在conta ...
- Java == 和 equals的区别
== 是操作符,equals是方法. 对于基本类型变量来说,只能使用 == ,因为基本类型的变量没有方法.使用==比较是值比较. 对于引用类型的变量来说,==比较的两个引用对象的地址是否相等.所有类都 ...
- 法术迸发(Spellburst)
描述 法术迸发 (EN:Spellburst ) 是一种在<通灵学园>中加入的关键字异能,在玩家打出一张法术牌后触发,只能触发一次. 若随从在法术结算过程中死亡,则不会触发效果 思路 首先 ...
- 最小生成树-普利姆(Prim)算法
最小生成树-普利姆(Prim)算法 最小生成树 概念:将给出的所有点连接起来(即从一个点可到任意一个点),且连接路径之和最小的图叫最小生成树.最小生成树属于一种树形结构(树形结构是一种特殊的图),或者 ...
- 【PHP数据结构】顺序表(数组)的相关逻辑操作
在定义好了物理结构,也就是存储结构之后,我们就需要对这个存储结构进行一系列的逻辑操作.在这里,我们就从顺序表入手,因为这个结构非常简单,就是我们最常用的数组.那么针对数组,我们通常都会有哪些操作呢? ...