在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屬性就能幫到你了。而且豎排文本也適用於一些創意性的設計當中,所以記住該屬性對大家日後的開發會很有幫助的喔!
最近在學習中總結到的知識希望對大家有幫助