CSS 文本方向 direction属性

揭秘 CSS 专栏收录该内容
162 篇文章 16 订阅

对于英文或中文等语言,默认是从左到右、从上到下进行阅读。然而,并非所有语言都是如此,还有许多从右向左阅读的语言,如阿拉伯语和希伯来语等。

于是,CSS2.1引入了 direction属性,用来定义文本流的书写方向,可选值有 ltr | rtl,默认值为 ltr。ltr(left-to-right)表示文本流从左到右书写,rtl(right-to-left)表示文本流从右到左书写。

direction属性影响块级元素中文本的书写方向,但不会影响拉丁文的字母数字字符,它总是从左到右书写,但会影响拉丁文的标点符号。对于行内元素,只有当 Unicode-bidi 属性设置为 embed 或 bidi-override 时才有效。不支持双向文本的浏览器可以忽略这个属性。

这里定义两个类,一个类的 direction属性设置为 ltr,一个类的 direction属性设置为 rtl。CSS代码如下:


  1. .ltr {
  2. direction: ltr;
  3. }
  4. .rtl {
  5. direction: rtl;
  6. }

然后,把这两个类应用到两个段落,让第一个段落中的文本从左到右书写,让第二个段落中的文本从右到左书写。HTML代码如下:


  1. <p class="ltr">left-to-right direction.</p>
  2. <p class="rtl">right-to-left direction.</p>

上述代码的运行结果如图 3‑23 所示:

direction属性效果图3-23 direction属性效果

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值