IT兄弟连 HTML5教程 CSS3属性特效 文字排版

5f16a58a57bc47108e1c532aebeafd05.jpg

 

direction定义文字排列方式,所有浏览器都兼容这个属性,有两个可选值rtl和ltr。文字排版的参数说明如表1所示。

表1  CSS3文字排版参数说明

 

b68ed790e7944ee0b491cf274633779c.png

 

上表所示,ltr是初始值,表示left-to-right,就是从左往右的意思,具体描述就是内联内容从左往右依次排布。我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边。

rtl则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个CSS声明,则前后两个图片,默认情况下,DOM在前的就显示在右侧,而且是在容器的右端。

我们可以通过dirction为段落文字进行排版。本例的段落文字默认是从左向右排版,当鼠标移入该元素时改变排版方向变为从右向左排版,当鼠标移开是恢复从左向右排版。代码如下所示:

8a03604da8554a21a47b701b10444b10.png

 

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,段落文字默认从左向右排版,如图1所示。

35e231192f9e49639d9c026020e74d31.jpg

图1  文字从左向右排版

 

当鼠标移入到段落元素时,段落文字变为从右向左排版,如图2所示。

ac8a4acc51d6490184ae057e8f9840ee.jpg

图2  文字从右向左排版

posted on 2019-11-14 08:42  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航