Die writing-mode Eigenschaft

Die Eigenschaft writing-mode legt die vertikale oder horizontale Textrichtung auf der Seite fest. Die Werte können horizontal-tb (horizontal von links nach rechts und von oben nach unten), vertical-rl (vertikal von oben nach unten und von rechts nach links), vertical-lr (vertikal von oben nach unten und von links nach rechts) sein.

Syntax

cssSelector {
  writing-mode: horizontal-tb oder vertical-rl oder vertical-lr;
}

Beispiel

Lassen Sie uns unseren Text horizontal von links nach rechts und von oben nach unten ausrichten:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: horizontal-tb;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Beispiel

Lassen Sie uns nun die Richtung ändern, vertikal von oben nach unten und von rechts nach links:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-rl;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Beispiel

Lassen Sie uns unseren Text vertikal von oben nach unten und von links nach rechts ausrichten:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-lr;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Siehe auch