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>               

原文地址:https://www.cnblogs.com/gja1026/p/9279818.html

时间: 2024-11-05 18:31:24

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

CSS3实现文本垂直排列-writing-mode

最近的一个项目中要使文字垂直排列,也就是运用了CSS的writing-mode属性. writing-mode最初时ie中支持的一个属性,后来在CSS3中增添了这一新的属性,所以在ie中和其他浏览器中的语法会有区别. 一.CSS3标准 writing-mode:horizontal-tb;//默认:水平方向,从上到下 writing-mode:vertical-rl; //垂直方向,从右向左 writing-mode:vertical-lr; //垂直方向,从左向右 <!DOCTYPE html

CSS3新增文本属性

CSS2中常用的属性: text-indent:首行缩进: vertical-align:垂直对齐方式: white-space:空格处理方式: line-height:设置行高: CSS3新增文本属性: text-overflow: clip:溢出的部分裁切掉: ellipsis:显示省略标记(...)  //该属性需要和over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用,否则无法看到效果. text-align: 原有属性:left

CSS3的文本特性

CSS3 文本 在Web页面或者Web应用程序中设置文本样式是CSS最基本的要求, 早期的CSS文本功能就是给Web页面设置文本的字体.字号.颜色.样式.粗细.间距等. 随着CSS3的出现,文本功能不仅仅局限于这些基本的运用,它给文本功能添加了一些高级的属性设置, 如文本阴影属性text-shadow.文本自动换行属性word- break. 长单词与URL地址自动换行属性word-wrap和文本溢出属性text-overflow等,在 CSS文本功能上主要分为三大类: 字体. 颜色和文本,te

iOS UIButton 设置图片文字垂直排列

在实际的iOS项目开发中,我们经常需要改变系统的控件的样式,自己定义一个,同样的当我们发现系统自带的某些方法不好使时,我们也会想到重写这个方法. 本文主要记录笔者设置UIButton图片文字垂直排列的方法,最终解决了在图片和文字垂直排列的情况下,如果文字长度变化会导致图片位置变动的问题,对 于此问题网上有比较多的做法,我就不多说了,在此记录这点细节仅为加深印象并方便以后查阅.如有纰漏还请见谅 方案一:通过调整按钮图片和文字的内边距 UIEdgeInsets typedef struct UIEd

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

关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器: 在CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难.但是,随着CSS3呱呱落地,获得越来越多的浏览器认可,一切又显得那么自然而然.虽然有些顽固的糟老头(如IE浏览器)还不认可这个新生的CSS3,但是,丝毫不影响其在其他浏览器上对

CSS3----vertical-align(文本垂直对齐方式)

一.代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本垂直对齐方式vertical-align</title> <style type="text/css"> .head{ margin: 0 0 0 100px; } .container{ margin: 0 0 0 100px; } .contai

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

Bootstrap按钮组嵌套、垂直排列、两端对齐

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

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

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述"> <title>CSS3新增文