首頁 > web前端 > css教學 > 如何在 CSS 中將文字垂直放置在右側?

如何在 CSS 中將文字垂直放置在右側?

Barbara Streisand
發布: 2024-11-15 11:54:02
原創
884 人瀏覽過

How to Orient Text Vertically on the Right in CSS?

How to Orient Text Vertically on the Right Using CSS

Can you align text vertically on the right in CSS? For example, you might want to display a date like "Sunday" upright but positioned on the right side of an element.

Problem:

You've tried using the following code, but it doesn't reverse the orientation:

div {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}
登入後複製

Solution:

The sideways value isn't supported by all browsers. Instead, you can use a scale transformation to achieve the desired effect:

div {
  writing-mode: vertical-rl;
  /*text-orientation: sideways;*/
  transform:scale(-1);
}
登入後複製

This will flip the text horizontally, making it appear as if it's oriented vertically on the right.

Example:

<div>Sunday</div>
登入後複製

Output with Transformation:

|
|
| Dimanche
登入後複製

以上是如何在 CSS 中將文字垂直放置在右側?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板