1. Web
  2. CSS
  3. Reference
  4. Properties
  5. text-orientation

text-orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Thuộc tính CSS text-orientation xác định hướng của các ký tự văn bản trong một dòng. Nó chỉ ảnh hưởng đến văn bản ở chế độ dọc (khi writing-mode không phải là horizontal-tb). Nó hữu ích để kiểm soát việc hiển thị các ngôn ngữ sử dụng chữ viết dọc, và cũng để tạo tiêu đề bảng dọc.

Try it

writing-mode: vertical-rl;
text-orientation: mixed;

writing-mode: vertical-rl;
text-orientation: upright;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      In another moment down went Alice after it, never once considering how in
      the world she was to get out again.
    </p>
  </div>
</section>

Cú pháp

css
/* Giá trị từ khóa */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

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

Thuộc tính text-orientation được chỉ định là một từ khóa duy nhất từ danh sách bên dưới.

Giá trị

mixed

Xoay các ký tự của chữ viết ngang 90° theo chiều kim đồng hồ. Bố trí các ký tự của chữ viết dọc một cách tự nhiên. Giá trị mặc định.

upright

Bố trí các ký tự của chữ viết ngang một cách tự nhiên (thẳng đứng), cũng như các ký tự cho chữ viết dọc. Lưu ý rằng từ khóa này khiến tất cả các ký tự được coi là từ trái sang phải: giá trị được sử dụng của direction bị buộc là ltr.

sideways

Khiến các ký tự được bố trí như thể chúng nằm ngang, nhưng toàn bộ dòng được xoay 90° theo chiều kim đồng hồ.

sideways-right

Bí danh cho sideways được giữ lại vì mục đích tương thích.

use-glyph-orientation

Trên các phần tử SVG, từ khóa này dẫn đến việc sử dụng giá trị của các thuộc tính SVG không còn dùng nữa glyph-orientation-vertical và glyph-orientation-horizontal.

Định nghĩa chính thức

Initial valuemixed
Applies toall elements, except table row groups, rows, column groups, and columns
Inheritedyes
Computed valueas specified
Animation typeNot animatable

Cú pháp chính thức

text-orientation = 
  mixed     |
  upright   |
  sideways

Ví dụ

HTML

html
<p>Lorem ipsum dolet semper quisquam.</p>

CSS

css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Kết quả

Thông số kỹ thuật

Specification
CSS Writing Modes Level 4
# text-orientation

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content