text-justify CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Die text-justify CSS-Eigenschaft legt fest, welche Art der Blockausrichtung für Text angewendet werden soll, wenn text-align: justify; auf ein Element gesetzt ist.
Syntax
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
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
none-
Die Textausrichtung ist deaktiviert. Dies hat denselben Effekt, als hätte man
text-alignüberhaupt nicht gesetzt, ist jedoch nützlich, wenn Sie die Ausrichtung aus einem bestimmten 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 Performance und Qualität sowie auf dem, was für die Sprache des Textes (z.B. Englisch, CJK-Sprachen usw.) am angemessensten ist. Dies ist die standardmäßig verwendete Ausrichtung, wenn
text-justifyüberhaupt nicht gesetzt ist. inter-word-
Der Text wird durch das Hinzufügen von Abständen zwischen den Wörtern ausgerichtet (effektiv wird
word-spacingvariiert), was am besten für Sprachen geeignet ist, die Wörter mithilfe von Leerzeichen trennen, wie Englisch oder Koreanisch. inter-character-
Der Text wird durch das Hinzufügen von Abständen zwischen den Zeichen ausgerichtet (effektiv wird
letter-spacingvariiert), was am besten für Sprachen wie Japanisch geeignet ist. distribute-
Zeigt dasselbe Verhalten wie
inter-character; dieser Wert wird für die Abwärtskompatibilität beibehalten.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Inline- und table-cell Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
text-justify =
[ auto | none | inter-word | inter-character | ruby ] ||
no-compress
Beispiele
Demonstration der verschiedenen Werte von text-justify
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
| Spezifikation |
|---|
| CSS Text Module Level 3 # text-justify-property |