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 上檢視此頁面 • 報告此內容的問題