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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191114A03I1G00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券