Drehen Sie die Texte mit CSS
-
Verwenden Sie die CSS-Eigenschaft
transform, um Text zu drehen -
Verwenden Sie die CSS-Eigenschaft
writing-mode, um Texte zu drehen
In diesem Artikel werden wir CSS verwenden, um die HTML-Texte zu drehen. Viele Sprachen wie Chinesisch, Japanisch oder Koreanisch verwenden den gedrehten Text häufig.
Außerdem müssen Entwickler beim Entwerfen von Webseiten möglicherweise Text um einige Grad drehen, um die Benutzeroberfläche attraktiver zu gestalten. Hier haben wir zwei verschiedene Methoden verwendet, um die Texte zu drehen.
Verwenden Sie die CSS-Eigenschaft transform, um Text zu drehen
Im folgenden Beispiel haben wir das Element div erstellt und ihm zur Identifizierung den Klassennamen element-text gegeben. Innerhalb des div-Elements haben wir das <span>-Element erstellt und den darin enthaltenen Text hinzugefügt.
Beispielcode:
<div class="example-text">
<span>Rotated texts.</span>
</div>
Um nun alle Texte des <div>-Elements zu rotieren, haben wir auf das div mit seinem Klassennamen in CSS zugegriffen.
Als nächstes haben wir die CSS-Eigenschaft transform: rotation(-90deg) auf das div-Element angewendet, um den gesamten Inhalt zu drehen. Wir haben jedoch -webkit-transform: rotation(-90deg); verwendet. Um Text im Chrome-Browser zu drehen, -moz-transform: rotation(-90deg); um Text im Firefox-Browser zu drehen, und dasselbe wie -o-transform: rotation(-90deg); für Oper.
Außerdem haben wir zusätzliches CSS angewendet, um die Position des div-Elements oben festzulegen. Hier bedeutet Position: absolute, dass sich die Position des div-Elements relativ zu seinem übergeordneten Element, dem eigentlichen Dokumentkörper, ändert.
.example-text {
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
position: absolute;
top: 40px;
}
In der folgenden Ausgabe können Benutzer sehen, dass der Text um 90 Grad gegen den Uhrzeigersinn gedreht ist.
Wenn wir den positiven Gradwert als Argument der rotate()-Methode übergeben, dreht es die Inhalte oder Texte im Uhrzeigersinn, was Benutzer über das unten stehende Beispiel lernen können.
.example-text {
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
position: absolute;
top: 40px;
}
<div class="example-text">
<span>Rotated texts.</span>
</div>
Verwenden Sie die CSS-Eigenschaft writing-mode, um Texte zu drehen
Die CSS-Eigenschaft writing-mode hilft uns, die Ausrichtung des Textes zu ändern. Damit können wir den Text um 90 oder -90 Grad drehen.
Wir können verticle-rl als Wert der Eigenschaft writing-mode verwenden, um Text so zu drehen, dass der Benutzer Text von rechts nach links und von oben nach unten lesen kann.
Im folgenden Beispiel haben wir das HTML-Tag <p> erstellt, das Text enthält, den wir mit der CSS-Eigenschaft writing-mode: vertical-rl gedreht haben.
Beispielcode:
<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>
.text{
writing-mode: vertical-rl;
height: 200px;
}
Wenn wir das verticle-lr als Wert der Eigenschaft writing-mode verwenden, dreht es den Text so, dass der Text von links nach rechts und von oben nach unten lesbar ist.
.text{
writing-mode: vertical-lr;
height: 200px;
}
<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>
Die obige Ausgabe lässt Benutzer den Text von links nach rechts und von oben nach unten lesen.
Wir haben verschiedene Methoden kennengelernt, um den Text zu drehen. Die erste Methode ermöglicht es Programmierern, Text um eine beliebige Gradzahl zu drehen.
Mit der zweiten Methode können Programmierer Text um 90 Grad drehen und ihn von links nach rechts oder von rechts nach links lesbar machen. Es wird daher empfohlen, die erste Methode zu verwenden.
