在網頁上如何實現文字豎排

在css中，我們的文字排版通常都是從左向右，從上往下。那麼，如果我們要實現頁面文字豎排，應該怎樣設定呢？為了解決這個問題，下面課課家**將為大家介紹實現文字豎排的方法，有興趣的朋友不妨參考一下。

一、writing-mode語法

要實現頁面文字豎排，我們需要使用writing-mode屬性，下面我們一起來了解一下它的語法：

語法：writing-mode:lr-tb、tb-rl

引數：lr-tb：從左向右，從上往下；tb-rl：從上往下，從右向左

具體寫法如下

writing-mode: horizontal-tb; /* 預設值 */

writing-mode: vertical-rl;

writing-mode: vertical-lr;

這裡再介紹一種ie私有的寫法：

writing-mode: inherit;

writing-mode: initial;

writing-mode: unset;

注意：關鍵字inherit ie8+支援，initial和unset ie13才支援

lr-tb : 預設值。物件中的內容在水平方向上從左向右流入，後一行在前一行的下面。所有的字形都是豎直向上的。這種布局是羅馬語系使用的。

tb-rl : 上-下，右-左。物件中的內容在垂直方向上從上向下流入，自右向左。後一豎行在前一豎行的左面。全形字符是豎直向上的，半形字元如拉丁字母或片假名順時針旋轉90度。這種布局是東亞語系通常使用的。

一些說明：

1.相同的writing-mode屬性值並不會累加，例如父子均設定了writing-mode:tb-rl，只會渲染一次，子元素並不會2次「旋轉」。

2.ie瀏覽器下，乙個自身具有布局的元素（不是純文字之類元素）如果writing-mode屬性值和父元素不同，當子元素的布局流變化的時候，其父元素座標系統的可用空間會被充分利用。

3.chrome瀏覽器下目前還需要-webkit-私有字首，雖然chrome和opera認識tb-rl等老的ie屬性值，但是，僅僅是認識而已，根本沒有任何效果。

二、writing-mode的用法

前面說了這麼多理論的東西,大家可能比較難理解.下面我們以一首古詩詞作為例子來展示這個writing-mode的用法。letgo!

css**

.verticle-mode/*ie7比較弱，需要做點額外的動作*/.verticle-mode.verticle-modeh4,.verticle-modep.verticle-modeh4

html**詠柳

碧玉妝成一樹高，

萬條垂下綠絲絛。

不知細葉誰裁出，

二月春風似剪刀。詠柳

碧玉妝成一樹高，

萬條垂下綠絲絛。

不知細葉誰裁出，

二月春風似剪刀。

如果你正在設計乙個介紹書法或者古代文學的**，你大概會通過各種古色古香的背景來對**進行潤色，但可能你會為模擬古代的豎排文字而苦惱，最後不得不使用來完成任務。這時候，writing-mode屬性就能幫到你了。而且豎排文字也適用於一些創意性的設計當中，所以記住該屬性對大家日後的開發會很有幫助的喔！

最近在學習中總結到的知識希望對大家有幫助