Thuộc tính writing-mode

Thuộc tính writing-mode thiết lập hướng văn bản dọc hoặc ngang trên trang. Các giá trị có thể là horizontal-tb (theo chiều ngang từ trái sang phải và từ trên xuống dưới), vertical-rl (theo chiều dọc từ trên xuống dưới và từ phải sang trái), vertical-lr (theo chiều dọc từ trên xuống dưới và từ trái sang phải).

Cú pháp

cssbộ chọn {
  writing-mode: horizontal-tb hoặc vertical-rl hoặc vertical-lr;
}

Ví dụ

Hãy thiết lập cho văn bản của chúng ta hướng theo chiều ngang từ trái sang phải và từ trên xuống dưới:

html<p>
  Văn bản
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: horizontal-tb;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Ví dụ

Bây giờ hãy thay đổi hướng theo chiều dọc từ trên xuống dưới và từ phải sang trái:

html<p>
  Văn bản
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-rl;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Ví dụ

Hãy thiết lập cho văn bản của chúng ta hướng theo chiều dọc từ trên xuống dưới và từ trái sang phải:

html<p>
  Văn bản
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-lr;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Xem thêm