text-justify

Avatar of Geoff Graham
Geoff Graham on

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Die CSS-Eigenschaft text-justify ist eine Ergänzung zur text-align-Eigenschaft, die verwendet wird, um die Justiermethode von Text festzulegen, wenn text-align auf den Wert justify gesetzt ist.

p {
  text-align: justify;
  text-justify: inter-word;
}

Werte

  • inter-word: Gibt an, dass Text durch Anpassung des Abstands zwischen Wörtern justiert wird, wodurch effektiv zusätzlicher Wortabstand erzeugt wird. Dies ist im Wesentlichen eine Variante der word-spacing-Eigenschaft.
  • inter-character: Gibt an, dass Text durch Anpassung des Abstands zwischen Zeichen justiert wird, wodurch effektiv zusätzlicher Zeichenabstand erzeugt wird. Dies ist im Wesentlichen eine Variante der letter-spacing-Eigenschaft.
  • auto: Ermöglicht dem Browser, zu entscheiden, ob die Justierung besser als inter-word oder inter-character gehandhabt wird. Dies kann in mehrsprachigen Szenarien hilfreich sein, in denen die Sprache des Inhalts erst nach dem Rendern bekannt ist, sodass der Browser-User-Agent entsprechend wählen kann, welche Methode besser zum Sprachkontext passt.
  • none: Deaktiviert Justiermethoden, wodurch alle Justierungsmöglichkeiten effektiv entfernt werden oder wo eine Justiermethode in der Kaskade auftreten könnte, überschrieben wird.

Was genau ist eine Textausrichtung?

Ausgerichteter Text ist eine schicke Art zu sagen, wie Text die Box ausfüllt, die ihn enthält. Tatsächlich kennen Sie das Ausrichten von Text vielleicht schon gut und wissen es nicht einmal. Wenn Sie jemals Textbearbeitungssoftware wie Word und Google Docs verwendet haben, sind Ihnen diese Symbole vielleicht bekannt

Textausrichtungs- und Justierungsoptionen in der Symbolleiste von Google Docs

Die ersten drei legen die Textausrichtung fest, genau wie die CSS-Eigenschaft text-align, bei der der Text links, rechts oder zentriert ausgerichtet werden kann.

Das vierte Symbol ist die Justierungsoption und weist den Inhalt an, die gesamte Breite des Dokuments auszufüllen, sodass jede Zeile bündig am Rand abschließt, unabhängig davon, ob dies den Abstand zwischen den Wörtern beeinflusst.

Das Ausrichten von Inhalten in Google Docs fügt Abstände zwischen Wörtern hinzu, um die gesamte Dokumentbreite jeder Zeile auszufüllen

Die Eigenschaft text-justify ermöglicht es uns, dasselbe zu tun, jedoch mit zusätzlicher Flexibilität, um zu bestimmen, ob die verwendete Abstands-Methode zur Justierung des Inhalts zwischen Wörtern oder Zeichen verwaltet wird.

Browser-Unterstützung

Die Eigenschaft text-justify ist im Spezifikationsteil CSS Text Module Level 3 enthalten, der zum Zeitpunkt der Erstellung dieses Artikels den Status eines Editor's Draft hat.

Diese Eigenschaft wird derzeit in der Kandidatenempfehlungsphase als „gefährdet“ eingestuft, d.h. sie könnte gestrichen werden. Daher wird die Verwendung dieser Eigenschaft in Produktionsumgebungen nicht empfohlen, da es unwahrscheinlich ist, dass sie in naher Zukunft als Standard in allen Browsern übernommen wird.

Die aktuelle Unterstützung ist auf Firefox 55+ beschränkt. Internet Explorer 11 und Edge 14+ unterstützen die Eigenschaft ebenfalls, jedoch nur den Wert inter-word sowie inoffizielle Werte, die nicht in der W3C-Spezifikation enthalten sind.

Diese Browser-Supportdaten stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

ChromeFirefoxIEEdgeSafari
Nein551118Nein

Mobil / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
Nein127NeinNein