text-justify

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die text-justify CSS Eigenschaft legt fest, welche Art der Ausrichtung auf Text angewendet werden soll, wenn text-align: justify; auf ein Element gesetzt ist.

Syntax

css
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* Deprecated value */

/* Global values */
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: revert-layer;
text-justify: unset;

Werte

none

Die Textausrichtung ist deaktiviert. Dies hat den gleichen Effekt wie das Nichtsetzen von text-align, obwohl es nützlich sein kann, wenn Sie die Ausrichtung aus irgendeinem Grund ein- und ausschalten müssen.

auto

Der Browser wählt die beste Art der Ausrichtung für die aktuelle Situation basierend auf einem Gleichgewicht zwischen Leistung und Qualität, aber auch darauf, was am geeignetsten für die Sprache des Textes ist (z.B. Englisch, CJK-Sprachen usw.). Dies ist die standardmäßig verwendete Ausrichtung, wenn text-justify überhaupt nicht gesetzt ist.

inter-word

Der Text wird durch Hinzufügen von Zwischenräumen zwischen Wörtern ausgerichtet (effektiv variierend word-spacing), was am besten für Sprachen geeignet ist, die Wörter mit Leerzeichen trennen, wie Englisch oder Koreanisch.

inter-character

Der Text wird durch Hinzufügen von Zwischenräumen zwischen Zeichen ausgerichtet (effektiv variierend letter-spacing), was für Sprachen wie Japanisch am besten geeignet ist.

distribute

Zeigt das gleiche Verhalten wie inter-character; dieser Wert wird zur Abwärtskompatibilität beibehalten.

Formale Definition

Anfangswertauto
Anwendbar aufInline- und table-cell Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

text-justify = 
auto |
none |
inter-word |
inter-character

Beispiele

Demonstration der verschiedenen Werte von text-justify

css
p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}

Spezifikationen

Specification
CSS Text Module Level 3
# text-justify-property

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-justify
auto
Experimental
inter-character
Experimental
inter-word
Experimental
none
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Has more compatibility info.

Siehe auch