IT兄弟連 HTML5教程 CSS3屬性特效 文字排版

 

direction定義文字排列方式，全部瀏覽器都兼容這個屬性，有兩個可選值rtl和ltr。文字排版的參數說明如表1所示。

表1  CSS3文字排版參數說明

 

 

上表所示，ltr是初始值，表示left-to-right，就是從左往右的意思，具體描述就是內聯內容從左往右依次排布。咱們平時網頁的處理都是這樣的，比方說先後兩個圖片，默認狀況下，DOM在前的就顯示在左邊。

rtl則是另一個值，right-to-left縮寫，就是從右往左的意思，再具體描述下，就是內聯內容是從右往左依次排布的，加入應用了這個CSS聲明，則先後兩個圖片，默認狀況下，DOM在前的就顯示在右側，並且是在容器的右端。

咱們能夠經過dirction爲段落文字進行排版。本例的段落文字默認是從左向右排版，當鼠標移入該元素時改變排版方向變爲從右向左排版，當鼠標移開是恢復從左向右排版。代碼以下所示：

 

使用瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，段落文字默認從左向右排版，如圖1所示。

圖1  文字從左向右排版

 

當鼠標移入到段落元素時，段落文字變爲從右向左排版，如圖2所示。

圖2  文字從右向左排版