direction
CSS property sets the direction of text, table columns, and horizontal overflow.
使用
rtl
for languages written from right to left (like Hebrew or Arabic), and
ltr
for those written from left to right (like English and most other languages).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Note that text direction is usually defined within a document (e.g., with
HTML's
dir
attribute
) rather than through direct use of the
direction
特性。
The property sets the base text direction of block-level elements and the direction of embeddings created by the
unicode-bidi
property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.
不像
dir
attribute in HTML, the
direction
property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.
direction
and
unicode-bidi
properties are the two only properties which are not affected by the
all
shorthand property.
/* Keyword values */ direction: ltr; direction: rtl; /* Global values */ direction: inherit; direction: initial; direction: unset;
ltr
Text and other elements go from left to right. This is the default value.
rtl
Text and other elements go from right to left.
For the
direction
property to have any effect on inline-level elements, the
unicode-bidi
property's value must be
embed
or
override
.
| 初始值 |
ltr
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | yes |
| 计算值 | 如指定 |
| 动画类型 | discrete |
ltr | rtl
blockquote {
direction: rtl;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Writing Modes Module Level 3
The definition of 'direction' in that specification. |
Proposed Recommendation | 无变化。 |
|
CSS Level 2 (Revision 1)
The definition of 'direction' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
direction
|
Chrome 完整支持 2 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 5.5 | Opera 完整支持 9.2 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持