direction

Try it

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;
}

Cú pháp

/* Giá trị từ khóa */
direction: ltr;
direction: rtl;

/* Giá trị toàn cục */
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
direction: unset;

Giá trị

ltr

Văn bản và các phần tử khác đi từ trái sang phải. Đây là giá trị mặc định.

rtl

Văn bản và các phần tử khác đi từ phải sang trái.

Để thuộc tính direction có tác dụng trên các phần tử cấp nội tuyến, giá trị thuộc tính unicode-bidi phải là embed hoặc override.

Mô tả

Thuộc tính đặt hướng văn bản cơ sở của các phần tử cấp khối và hướng nhúng được tạo bởi thuộc tính unicode-bidi. Nó cũng đặt căn chỉnh mặc định của văn bản, các phần tử cấp khối, và hướng các ô chảy trong một hàng bảng hoặc lưới.

Khác với thuộc tính dir trong HTML, thuộc tính direction không được kế thừa từ cột bảng vào ô bảng, vì kế thừa CSS theo cây tài liệu, và các ô bảng nằm trong các hàng nhưng không nằm trong các cột.

Các thuộc tính direction và unicode-bidi là hai thuộc tính duy nhất không bị ảnh hưởng bởi thuộc tính viết tắt all.

Định nghĩa hình thức

Cú pháp hình thức

direction = 
  ltr  |
  rtl  

Ví dụ

Đặt hướng từ phải sang trái

Trong ví dụ dưới đây có hai chuỗi văn bản, cả hai đều được hiển thị bằng direction: rtl. Trong khi văn bản tiếng Ả Rập được hiển thị đúng với cài đặt này, văn bản tiếng Anh giờ có dấu chấm ở một vị trí bất thường.

blockquote {
  direction: rtl;
  width: 300px;
}

<blockquote>
  <p>This paragraph is in English but incorrectly goes right to left.</p>
  <p></p>
</blockquote>

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

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• unicode-bidi
• writing-mode
• Thuộc tính SVG direction
• Thuộc tính toàn cục HTML dir
• Tạo điều khiển biểu mẫu dọc
• Xử lý các hướng văn bản khác nhau