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

• 2019 年 11 月 14 日
• 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/ITXDL123/article/details/103060872

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

表1 CSS3文字排版參數說明

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

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

我們可以通過dirction為段落文字進行排版。本例的段落文字默認是從左向右排版，當滑鼠移入該元素時改變排版方向變為從右向左排版，當滑鼠移開是恢復從左向右排版。程式碼如下所示：

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

圖1 文字從左向右排版

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

圖2 文字從右向左排版