欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS的writing-mode文字排版屬性使用教程

haorooms   發(fā)布時(shí)間：2016-05-23 12:04:20   作者：Aaron   我要評(píng)論
writing-mode經(jīng)常被用來實(shí)現(xiàn)頁面文字的豎排,這里我們來系統(tǒng)地看一下CSS的writing-mode文字排版屬性使用教程,其中包括一個(gè)古詩的例子來展示writing-mode文字豎排用法

語法：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. writing-mode : lr-tb | tb-rl  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* 關(guān)鍵字值 */  
  2. writing-mode: horizontal-tb;    /* 默認(rèn)值 */  
  3. writing-mode: vertical-rl;   
  4. writing-mode: vertical-lr;  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* 全局值-關(guān)鍵字inherit IE8+，initial和unset IE13才支持 */  
  2. writing-mode: inherit;   
  3. writing-mode: initial;   
  4. writing-mode: unset;  

lr-tb :　 默認(rèn)值。對(duì)象中的內(nèi)容在水平方向上從左向右流入，后一行在前一行的下面。 所有的字形都是豎直向上的。這種布局是羅馬語系使用的
tb-rl :　 上-下，右-左。對(duì)象中的內(nèi)容在垂直方向上從上向下流入，自右向左。后一豎行在前一豎行的左面。全角字符是豎直向上的，半角字符如拉丁字母或片假名順時(shí)針旋轉(zhuǎn)90度。這種布局是東亞語系通常使用的

說明：
設(shè)置或檢索對(duì)象的內(nèi)容塊固有的書寫方向。西方語言確省的是左-右，上-下的書寫方式。但是亞洲語言常有上-下，右-左的書寫方式。
當(dāng)此屬性值發(fā)生變化時(shí)， text-align屬性與vertical-align 屬性的作用也將發(fā)生變化。
對(duì)于下列元素來說，樣式表屬性不可繼承：
BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type=submit INPUT type=text ISINDEX OPTION TEXTAREA

此屬性效果不會(huì)被累積作用。例如，假如父對(duì)象的此屬性值設(shè)為 tb-rl ，子對(duì)象的此屬性值設(shè)為 tb-rl 不會(huì)導(dǎo)致子對(duì)象的旋轉(zhuǎn)。
假如對(duì)象的 writing-mode 屬性設(shè)置和它的父對(duì)象不一樣則其將獲得自己的布局。那樣一個(gè)對(duì)象的寬度是通過使用它第一個(gè)有布局的父對(duì)象的高度而確定的。
當(dāng)你使用具有不同 writing-mode 屬性值的對(duì)象時(shí)，給每一個(gè)對(duì)象指定確定的尺寸能夠讓你更好的整體控制它們的布局。
此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。
對(duì)應(yīng)的腳本特性為 writingMode 。

文字的豎排版示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .verticle-mode {   
  2.     writing-mode: tb-rl;   
  3.     -webkit-writing-mode: vertical-rl;         
  4.     writing-mode: vertical-rl;   
  5. }   
  6. /* IE7比較弱，需要做點(diǎn)額外的動(dòng)作 */  
  7. .verticle-mode {   
  8.     *width: 120px;   
  9. }   
  10. .verticle-mode h4,   
  11. .verticle-mode p {   
  12.     *display: inline;   
  13.     *writing-mode: tb-rl;   
  14. }   
  15. .verticle-mode h4 {   
  16.     *float:rightright;   
  17. }   

html如下下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="verticle-mode">  
  2.     <h4>詠柳</h4>  
  3.     <p>碧玉妝成一樹高，<br>萬條垂下綠絲絳。<br>不知細(xì)葉誰裁出，<br>二月春風(fēng)似剪刀。</p>  
  4. </div>  

我們就可以看到古詩文的豎排了！

相關(guān)文章

  • css網(wǎng)頁布局中文字排版的屬性和用法

    今天總結(jié)下，css網(wǎng)頁布局中文字排版的相關(guān)屬性以及用法。
    2009-11-14

  • CSS教程:CSS控制網(wǎng)頁文字排版實(shí)例

    網(wǎng)頁制作Webjx文章簡介：有關(guān)CSS基本的排版控制雖然已有詳細(xì)的使用說明和參考教程，但還有許多豐富的CSS排版能力，是很少能查到的。今天的這些實(shí)例，為您提供了很多想象和
    2009-04-02

  • 淺析CSS3 用text-overflow解決文字排版問題

    這篇文章主要介紹了CSS3 用text-overflow解決文字排版問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2020-10-28

最新評(píng)論