CSS 文本方向 direction属性

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

于是，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 所示：

图3-23 direction属性效果

关于作者

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

CSS 文本方向 direction属性相关推荐

【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...
CSS 文本溢出 text-overflow属性
text-overflow属性用来设置容器内的文本溢出时,如何处理溢出的内容,取值为 clip | ellipsis,默认值为 clip. clip 表示文本溢出时,简单的把溢出的部分裁剪掉:elli ...
CSS深度学习 - 文本方向 direction 和 dir
dir 与 direction 在 HTML 中,指示元素中文本方向有如下几种方式. 第一种是直接使用 dir 属性去描述,详情 - dir <div dir="rtl"&g ...
CSS 文本装饰 text-decoration属性
在CSS中,使用 text-decoration属性,可以在文本上方.下方.或中间添加装饰线,可选值为 none | underline | overline | line-through | bli ...
CSS 文本转换 text-transform属性
英文字母的大小写转换,是CSS提供的非常实用的功能之一,文本的大小写转换在空格处理之后进行.文本转换对中文无效,因为中文不存在大小写. 在CSS中,使用 text-transform属性来对文本进行大 ...
CSS 文本缩进text-indent属性
在CSS中,使用 text-indent属性,可以让元素第一行缩进一个给定的宽度,可能是最常见的文本格式化效果.语法格式为: text-indent: <length> | <pec ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
【CSS 文本属性（Text）】
CSS 文本属性 CSS 文本属性(Text) 1. color 属性: 颜色的前景色 (文本/文本装饰/边框/当前颜色的颜色) 2. direction 属性: 文本/表列/水平溢出的方向 (文 ...
CSS文本样式和CSS3文本效果以及背景
CSS文本样式 text-indent属性 text-indent属性可以为特定选项的文本进行首行缩进,取值可以是长度值或百分比,它的属性值通常使用em作为单位,text-indent: 2em;表示 ...

CSS 文本方向 direction属性

CSS 文本方向 direction属性相关推荐

最新文章

热门文章