方向

警告:如果可能,建议作者避免使用 direction CSS 属性,而是使用 HTML 的 dir 全局属性。

direction CSS 属性设置文本、表格列和水平溢出的方向。对于从右到左书写的语言(如希伯来语或阿拉伯语),使用 rtl;对于从左到右书写的语言(如英语和大多数其他语言),使用 ltr

试一试

请注意,文本方向通常在文档内定义(例如,使用 HTML 的 dir 属性),而不是通过直接使用 direction 属性。

该属性设置块级元素的基本文本方向以及 unicode-bidi 属性创建的嵌入的方向。它还设置文本、块级元素的默认对齐方式以及单元格在表格行中流动的方向。

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

directionunicode-bidi 属性是两个不受 all 简写属性影响的属性。

语法

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

/* Global values */
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
direction: unset;

ltr

文本和其他元素从左到右排列。这是默认值。

rtl

文本和其他元素从右到左排列。

要使 direction 属性对内联元素产生任何影响,unicode-bidi 属性的值必须为 embedoverride

正式定义

初始值ltr
应用于所有元素
继承
计算值如指定
动画类型不可动画

正式语法

direction = 
ltr |
rtl

示例

设置从右到左方向

下面的示例中有两个文本字符串,它们都使用 direction: rtl 显示。虽然阿拉伯语文本在此设置下正确显示,但英语文本的句号现在位于不寻常的位置。

css
blockquote {
  direction: rtl;
  width: 300px;
}
html
<blockquote>
  <p>This paragraph is in English but incorrectly goes right to left.</p>
  <p></p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
  <p></p>
</blockquote>

规范

规范
CSS 书写模式级别 4
# 方向

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅