Heim > Web-Frontend > CSS-Tutorial > Wie richtet man Text in CSS vertikal rechts aus?

Wie richtet man Text in CSS vertikal rechts aus?

Barbara Streisand
Freigeben: 2024-11-15 11:54:02
Original
884 Leute haben es durchsucht

How to Orient Text Vertically on the Right in CSS?

So richten Sie Text mit CSS vertikal rechts aus

Können Sie Text in CSS vertikal rechts ausrichten? Beispielsweise möchten Sie möglicherweise ein Datum wie „Sonntag“ aufrecht, aber auf der rechten Seite eines Elements anzeigen.

Problem:

Sie haben es mit versucht den folgenden Code, aber er kehrt den nicht um Ausrichtung:

div {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}
Nach dem Login kopieren

Lösung:

Der Seitwärtswert wird nicht von allen Browsern unterstützt. Stattdessen können Sie eine Skalierungstransformation verwenden, um den gewünschten Effekt zu erzielen:

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

Dadurch wird der Text horizontal gespiegelt, sodass er aussieht, als wäre er vertikal rechts ausgerichtet.

Beispiel:

<div>Sunday</div>
Nach dem Login kopieren

Ausgabe mit Transformation:

|
|
| Dimanche
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie richtet man Text in CSS vertikal rechts aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage