Wie kann man Text in CSS ohne Ausrichtungsprobleme drehen?

So drehen Sie Text in CSS ohne Ausrichtungsprobleme

Um die Textrotation wie im bereitgestellten Bild zu erreichen, können CSS-Transformationen verwendet werden . Dies führt jedoch häufig zu Fehlausrichtungen und Positionierungsproblemen. Dieses Problem entsteht, weil sich die Drehung auf die Position des Elements im Fluss auswirkt.

Im bereitgestellten HTML sind mehrere Titel und Inhaltsabschnitte in einem Container verschachtelt. Um die Titel zu drehen, wird die Eigenschaft transform: rotation(-90deg) angewendet. Diese Drehung stört jedoch die Ausrichtung des Inhalts, da davon ausgegangen wird, dass der Inhalt horizontal nach dem Titel fließt.

Ursachen für Ausrichtungsprobleme

1. Horizontaler Fluss: Der Inhalt ist so eingestellt, dass er nach links schwebt, sodass er nach dem gedrehten Titel horizontal fließt. Durch die Drehung entsteht eine vertikale Lücke, die die beabsichtigte Ausrichtung unterbricht.
2. Ignorierte Breite: Wenn der Titel gedreht wird, wird seine Breite ignoriert. Dadurch fließt der Inhalt weiterhin horizontal weiter, vorausgesetzt, dass der Titel immer noch den Breitenraum einnimmt.

Lösung: Ausrichtung beibehalten

Um die richtige Ausrichtung aufrechtzuerhalten, haben wir kann die folgenden Strategien anwenden:

1. Vertikaler Fluss:

• Konvertieren Sie den Titel in ein Blockelement, indem Sie display: block hinzufügen.
• Wenden Sie Writing-Mode: Vertical-rl an, um den Schreibmodus in Vertical zu ändern.
• Drehen Sie den Titel, ohne seine Positionierung zu beeinflussen, indem Sie transform: rotieren(-90 Grad) oder transformieren: rotierenZ(-90 Grad) verwenden.
• Stellen Sie den Schreibmodus des Inhalts auf Schreibmodus: horizontal-tb ein .

Beispiel:

<code class="css">.title {
  display: block;
  writing-mode: vertical-rl;
  transform: rotateZ(-90deg) /* or transform: rotate(-90deg) */;
}

.content {
  writing-mode: horizontal-tb;
}</code>

2. Absolute Positionierung:

• Konvertieren Sie den Titel in ein absolutes Element, indem Sie position: absolute hinzufügen.
• Drehen Sie den Titel mit „Transformieren“: Drehen (-90 Grad).
• Positionieren Sie den Titel vertikal, indem Sie seine oberen und unteren Eigenschaften festlegen.
• Richten Sie den Inhalt mithilfe von Rändern am gedrehten Titel aus.

Beispiel:

<code class="css">.title {
  position: absolute;
  transform: rotate(-90deg);
  top: 0;
  bottom: 0;
}

.content {
  margin-left: 50px /* adjust the margin to align with the rotated title */;
}</code>

Mit diesen Methoden können Sie Text in CSS drehen und dabei die Ausrichtung und Positionierung benachbarter Elemente beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann man Text in CSS ohne Ausrichtungsprobleme drehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!