?

在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{

　　writing-mode:tb-rl;

　　-webkit-writing-mode:vertical-rl;

　　writing-mode:vertical-rl;}/*IE7比較弱，需要做點額外的動作*/.verticle-mode{

　　*width:120px;}.verticle-modeh4,.verticle-modep{

　　*display:inline;

　　*writing-mode:tb-rl;}.verticle-modeh4{

　　*float:right;}

　　html代碼

　　<h4>詠柳</h4><p>碧玉妝成一樹高，<br>萬條垂下綠絲絳。<br>不知細葉誰裁出，<br>二月春風似剪刀。</p>

　　<divclass="verticle-mode">

　　<h4>詠柳</h4>

　　<p>碧玉妝成一樹高，<br>萬條垂下綠絲絳。<br>不知細葉誰裁出，<br>二月春風似剪刀。</p></div>

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

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

?

?

總結

以上是生活随笔為你收集整理的在网页上如何实现文字竖排的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。