direction

CSS 中的 direction 属性设置块级元素内内容流的方向。这适用于文本、内联和内联块元素。它还设置文本的默认对齐方式以及表格单元格在表格行中流动的方向。

.main-content {
  direction: rtl;  /* Right to Left */
}

有效值为

• ltr – 从左到右，默认值
• rtl – 从右到左
• inherit – 从父元素继承其值

此页面上的文本设置为默认的 ltr 方向。设置 rtl 最常见的用例是用于包含希伯来语或阿拉伯语文本的网页。以下是一个设置了 rtl 的阿拉伯语示例

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

还存在一个用于设置方向的 HTML 属性

<p dir="rtl">This paragraph goes from right to left.</p>

CSS 属性和 HTML 属性都将方向级联到后代元素。建议使用 HTML 属性，因为它即使 CSS 失败或出于任何原因不影响页面，也能正常工作。

还存在一个专门用于更改文本方向的 HTML 标签： 即 _双向覆盖元素_。它的存在是为了提供一个与语义无关的元素，专门用于此目的。例如

<bdo dir="rtl">This text will go right to left.</bdo>

将所有这些与 CSS 配合使用...

*[dir="ltr"] { direction: ltr; unicode-bidi: embed; }

*[dir="rtl"] { direction: rtl; unicode-bidi: embed; }

bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }

bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }

“bidi” = “双向”

在创建无 Flexbox 和无 Grid 的布局时，人们经常在浮动和内联块之间进行选择，以创建列。除了无需清除浮动之外，内联块的另一个优势是更改 direction 属性也会反转布局。浮动则并非如此，如果网页支持多种语言并且语言方向从 ltr 更改为 rtl 或反之，则需要重置浮动。

如果您需要更改内联元素的方向（与父块级元素相反），则需要使用 元素，或确保内联元素正确设置 unicode-bidi 属性：

Some regular text <bdo dir="rtl">reverse direction</bdo> text text <span dir="rtl">reverse direction</span>

span[dir] {
  unicode-bidi: bidi-override;
}

相关属性

• unicode-bidi

其他资源

• W3C 规范
• MDN 文档
• W3C CSS 与标记的双向支持对比

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
2.0+	1.3+	任何	9.2+	5.5+	任何	3.1+