CSS direction-Eigenschaft

Die direction-Eigenschaft definiert die Textschreibrichtung.

Die direction-Eigenschaft legt die grundlegende Textschreibrichtung von Block-Elementen sowie die Richtung von Einbettungen fest, die durch die unicode-bidi-Eigenschaft erstellt werden. Sie legt außerdem die Standardtextausrichtung von Block-Elementen und die Richtung fest, in der Zellen innerhalb einer Tabellenzeile fließen.

Die Textschreibrichtung wird normalerweise innerhalb eines Dokuments angegeben, wie z. B. das dir-Attribut von HTML, anstatt die direction-Eigenschaft direkt zu verwenden. Im Gegensatz zum HTML dir-Attribut wird die CSS direction-Eigenschaft nicht von Tabellenzellen von Tabellenkolonnen geerbt, da Tabellenzellen in Zeilen und nicht in Kolonnen enthalten sind. Stattdessen erben Zellen die Richtung vom table-Element selbst.

INFO

Die direction-Eigenschaft hat keine Auswirkung auf inline-Elemente.

Anfangswert	ltr
Anwendbar auf	Alle Elemente.
Vererbbar	Ja.
Animierbar	Diskret.
Version	CSS2
DOM-Syntax	object.style.direction = "rtl";

Syntax

Syntax der CSS direction-Eigenschaft

css

direction: ltr | rtl | initial | inherit;

Beispiel für die direction-Eigenschaft:

Beispiel der CSS direction-Eigenschaft mit dem Wert rtl (rechts nach links)

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        direction: rtl;
      }
    </style>
  </head>
  <body>
    <p>As you can see, this text is written with default direction.</p>
    <div>However, this text is written from right to left as we defined.</div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS direction Property

Im gegebenen Beispiel wird der Wert „rtl“ verwendet. Der Text verläuft von rechts nach links.

Werte

Wert	Beschreibung	Ausführen
ltr	Bedeutet, dass die Textausrichtung von links nach rechts verläuft. Dies ist der Standardwert der Eigenschaft.	Ausführen »
rtl	Bedeutet, dass die Textausrichtung von rechts nach links verläuft.	Ausführen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausführen »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Practice

Was bewirkt die CSS-Eigenschaft 'direction'?

Legt die Textschreibrichtung für den Inhalt eines Elements fest.Steuert die Richtung des Flex-ContainersSie gilt nicht für Inline-Elemente.Sie hat Einfluss auf die Reihenfolge der Tabellenkolonnen.

CSS direction-Eigenschaft ​

Syntax ​

Beispiel für die direction-Eigenschaft: ​

Ergebnis ​