Wie erreicht man eine vertikale Textausrichtung auf der rechten Seite in CSS?

CSS-Textausrichtung: Vertikale Ausrichtung auf der rechten Seite erreichen

In CSS kann die Textausrichtung mithilfe der Eigenschaften „writing-mode“ und „text-orientation“ manipuliert werden. Um vertikal ausgerichteten Text zu erhalten, der nach rechts zeigt, wie ein Bild, das Sie vielleicht gesehen haben, ist eine Kombination dieser Eigenschaften erforderlich. Es ist jedoch zu beachten, dass die Textausrichtung nicht überall in allen Browsern unterstützt wird.

Ursprünglicher Codeversuch:

div {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

Lösung mit Transformation:

div {
  writing-mode: vertical-rl;
  transform: scale(-1);
}

Der ursprüngliche Code versucht, seitwärts zu verwenden. Für eine größere Browserkompatibilität können Sie sie jedoch durch eine Skalierungstransformation ersetzen. Durch die Anwendung der Regel transform:scale(-1) wird der Text horizontal gespiegelt, wodurch seine Ausrichtung umgekehrt wird und effektiv eine rechtsseitige vertikale Textausrichtung entsteht.

HTML:

<div>dimanche</div>

Das obige ist der detaillierte Inhalt vonWie erreicht man eine vertikale Textausrichtung auf der rechten Seite in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!