揭秘CSS(第 1 版)
3.2.11 文本方向
阅读(

概述

CSS选择器

字体和文本

字体

文本

文本阴影

文本装饰

文本转换

单词间距

字符间距

垂直对齐

行高

水平对齐

水平对齐

文本缩进

文本方向

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

于是,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代码如下:

.ltr  {
   direction: ltr;
}
.rtl  {
   direction: rtl;
}

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

<p class="ltr">left-to-right direction.</p>
<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 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验