direction

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

警告：在可能的情况下，建议作者避免使用 direction CSS 属性，而是使用 HTML dir 全局属性。

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

试一试

direction: ltr;

direction: rtl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
  display: flex;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

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

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

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

direction 和 unicode-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 属性的值必须是 embed 或 override。

正式定义

初始值	`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 Writing Modes Level 4 # direction
Scalable Vector Graphics (SVG) 2 # DirectionProperty

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者于 2025 年 7 月 14 日最后修改。

在 GitHub 上查看此页面 • 报告此内容的问题