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  文字从右向左排版