Heim  >  Artikel  >  Web-Frontend  >  Wie implementiert man eine vertikale Textausrichtung von rechts nach links in CSS?

Wie implementiert man eine vertikale Textausrichtung von rechts nach links in CSS?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-19 06:21:03680Durchsuche

How to Implement Right-to-Left Vertical Text Orientation in CSS?

Vertikale Textausrichtung von rechts nach links in CSS implementieren

Vertikale Textausrichtung in CSS kann mithilfe der Eigenschaft writing-mode erreicht werden. zusammen mit der text-orientation-Eigenschaft, um die gewünschte Richtung anzugeben. Allerdings wird der Wert text-orientation: sideways nicht von allen Browsern unterstützt.

Um den im bereitgestellten Bild zu sehenden Effekt zu erzielen, bei dem der Text vertikal nach rechts ausgerichtet ist, kann ein alternativer Ansatz mit a gewählt werden Skalierungstransformation:

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

Dieses CSS stellt den Schreibmodus auf eine vertikale Ausrichtung von rechts nach links ein und wendet eine negative Skalierungstransformation (-1) an, um den Text horizontal zu spiegeln. Der resultierende Effekt ist vertikal ausgerichteter Text, der auf der rechten Seite des Containers erscheint.

Das obige ist der detaillierte Inhalt vonWie implementiert man eine vertikale Textausrichtung von rechts nach links in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn