direction定义文字排列方式,所有浏览器都兼容这个属性,有两个可选值rtl和ltr。文字排版的参数说明如表1所示。
表1 CSS3文字排版参数说明
上表所示,ltr是初始值,表示left-to-right,就是从左往右的意思,具体描述就是内联内容从左往右依次排布。我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边。
rtl则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个CSS声明,则前后两个图片,默认情况下,DOM在前的就显示在右侧,而且是在容器的右端。
我们可以通过dirction为段落文字进行排版。本例的段落文字默认是从左向右排版,当鼠标移入该元素时改变排版方向变为从右向左排版,当鼠标移开是恢复从左向右排版。代码如下所示:
使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,段落文字默认从左向右排版,如图1所示。
图1 文字从左向右排版
当鼠标移入到段落元素时,段落文字变为从右向左排版,如图2所示。
图2 文字从右向左排版
原文地址:https://www.cnblogs.com/itxdl/p/11854660.html
时间: 2024-10-08 02:11:54