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
Barbara StreisandOriginal
2024-11-15 11:54:02897Durchsuche

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;
}

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);
}

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

Beispiel:

<div>Sunday</div>

Ausgabe mit Transformation:

|
|
| Dimanche

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!

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