CSS3實現文本垂直排列

時間 2019-11-19

標籤 css3 css 實現文本垂直排列欄目 CSS 简体版

原文原文鏈接

最近的一個項目中要使文字垂直排列，也就是運用了CSS的writing-mode屬性。css

writing-mode最初時ie中支持的一個屬性，後來在CSS3中增添了這一新的屬性，因此在ie中和其餘瀏覽器中的語法會有區別。html

1.0 CSS3標準

writing-mode:horizontal-tb;//默認：水平方向，從上到下 writing-mode:vertical-rl; //垂直方向，從右向左 writing-mode:vertical-lr; //垂直方向，從左向右

democss3

 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下該屬性值則顯得尤其複雜：web

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/spa

3.0 一些應用

3.1 垂直居中　　

經過對這個屬性的使用，咱們能夠結合 text-align:center 實現垂直居中或者使用margin: auto。code

 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來實現文字點擊時的下沉效果；htm

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。