direction
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
direction
CSS 属性用于设置文本、表格列和水平溢出的方向。对于从右到左书写的语言(如希伯来语或阿拉伯语),应将该属性设置为 rtl
;对于从左到右书写的语言(如英语和大多数其他语言),则应将该属性设置为 ltr
。
尝试一下
请注意,文本方向通常在文档中定义(例如,使用 HTML 的 dir
属性 属性),而不是通过直接使用 direction
属性来定义。
该属性设置可以设置块级元素文本的基本方向,也可以设置由通过 unicode-bidi
属性创建的嵌入元素的方向。与此同时,它还可以设置文本、块级元素的默认对齐方式,以及表行中的单元格的流动方向。
与 HTML 中的 dir
属性不同,direction
属性不会从表列继承到表单元格,因为 CSS 继承遵从文档流,而表单元格位于行内部,但不在列内部。
direction
和 unicode-bidi
属性是唯二不受 all
简写属性影响的属性。
语法
/* 关键字值 */
direction: ltr;
direction: rtl;
/* 全局值 */
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
direction: unset;
取值
要使 direction
属性在行级元素上生效,unicode-bidi
属性的值必须是 embed
或 override
。
形式定义
形式语法
direction =
ltr |
rtl
示例
设置从右往左的方向
在下面的例子中有两个文本字符串,都使用 direction: rtl
来显示。尽管这种设置可以正确显示阿拉伯文本,但中文内容却有一个标点符号在一个不寻常的位置。
blockquote {
direction: rtl;
width: 300px;
}
<blockquote>
<p>这个段落用中文书写的,但是方向是从右到左,是错误的。</p>
</blockquote>
<blockquote>
<p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
</blockquote>
规范
Specification |
---|
CSS Writing Modes Level 4 # direction |
浏览器兼容性
BCD tables only load in the browser
参见
unicode-bidi
writing-mode
- HTML 的
dir
全局属性