direction

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

CSS属性 direction 用来设置文本、表列水平溢出的方向。  rtl 表示从右到左 (类似希伯来语或阿拉伯语), ltr 表示从左到右 (类似英语等大部分语言).
 

值得注意的是文本方向通常由文档定义 (e.g., with HTML's dir attribute)而不是通过直接使用 direction 属性定义。

该属性设置可以设置块级元素文本的基本方向,也可以设置由通过 unicode-bidi属性创建的嵌入元素的方向。与此同时,它还可以设置文本、块级元素的默认对齐方式 ,以及表行中的单元格的流动方向。

与 HTML 中的 dir 属性不同,direction属性不会从表列继承到表单元格, 因为 CSS 继承遵从文档流, 而表单元格位于行内部, 但不在列内部。

direction 属性和 unicode-bidi 属性不受 all 属性影响。

语法

/* Keyword values */
direction: ltr;
direction: rtl;

/* Global values */
direction: inherit;
direction: initial;
direction: unset;

取值

ltr
默认属性。可设置文本和其他元素的默认方向是从左到右。
rtl
可设置文本和其他元素的默认方向是从右到左。

标准语法

ltr | rtl

示例

blockquote {
  direction: rtl;
}

规范

Specification(规范) Status(状态) Comment(备注)
CSS Writing Modes Module Level 3
direction
Proposed Recommendation No change.
CSS Level 2 (Revision 1)
direction
Recommendation Initial definition.
初始值ltr
适用元素all elements
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
directionChrome Full support 2Edge Full support 12Firefox Full support 1IE Full support 5.5Opera Full support 9.2Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes

Legend

Full support  
Full support

参见