CSS text-justify Eigenschaft
Die CSS-Eigenschaft text-justify legt fest, wie der Abstand zwischen Wörtern oder Zeichen bei Blocksatz verteilt wird. Werte und Beispiele.
Die CSS-Eigenschaft text-justify steuert, wie der Browser zusätzlichen Leerraum verteilt, wenn Blocksatz-Text auf die volle Zeilenbreite gestreckt wird. Sie hat nur dann eine Wirkung, wenn text-align auf justify gesetzt ist — allein bewirkt sie nichts.
Diese Seite erklärt, was text-justify bewirkt, welche Werte es gibt, wann man es einsetzt, welche Browser-Kompatibilitätsprobleme zu beachten sind und wie es sich zu anderen Abstandseigenschaften verhält.
Das Problem, das sie löst
Wenn Sie text-align: justify setzen, füllt der Browser jede Zeile so auf, dass linker und rechter Rand bündig abschließen – wie in einer Zeitungsspalte. Es gibt zwei Möglichkeiten, diesen Leerraum hinzuzufügen: die Abstände zwischen Wörtern vergrößern oder die Abstände zwischen Zeichen vergrößern. Mit text-justify wählen Sie, welche Strategie der Browser verwendet, anstatt es dem Standardalgorithmus zu überlassen.
Das ist wichtig, weil die richtige Strategie von der Sprache abhängt. Sprachen mit Leerzeichen zwischen Wörtern (Englisch, Deutsch, Französisch) sehen in der Regel mit zusätzlichem Wortabstand am besten aus. Sprachen, die ohne Leerzeichen zwischen Wörtern geschrieben werden (wie Chinesisch, Japanisch und Koreanisch), haben nur Spielraum zum Strecken zwischen Zeichen, weshalb inter-character dort die natürliche Wahl ist.
text-justify ist eine der CSS3-Eigenschaften.
| Anfangswert | auto |
|---|---|
| Gilt für | Blockelemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.textJustify = "inter-character"; |
Syntax
text-justify: auto | inter-word | inter-character | none | initial | inherit;Da text-justify ohne Blocksatz-Text wirkungslos ist, werden die beiden Eigenschaften fast immer gemeinsam gesetzt:
p {
text-align: justify; /* turn justification on */
text-justify: inter-word; /* choose how the gaps grow */
}Beispiel der text-justify-Eigenschaft:
CSS text-justify Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Ergebnis
Bei inter-word wachsen die Abstände zwischen den Wörtern, bis jede Zeile den Containerrand erreicht. Verkleinern Sie den Browser, sehen Sie, wie sich die Lücken bei Zeilen stärker ausdehnen, die weit von der vollen Breite entfernt sind.
Beispiel der text-justify-Eigenschaft mit dem Wert „inter-character":
CSS text-justify mit inter-character-Wert Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-character;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Bei inter-character wird der zusätzliche Leerraum zwischen einzelnen Zeichen statt nur zwischen Wörtern eingefügt. Bei lateinischem Text ist der Effekt subtil; bei CJK-Schriften, wo keine Wortlücken vorhanden sind, ist er jedoch unverzichtbar.
Browser-Unterstützung und Fallstricke
text-justify wird uneinheitlich unterstützt und hat einige Tücken, die Sie kennen sollten, bevor Sie sich darauf verlassen:
inter-characterist der zuverlässigste Zusatzwert, aber das früher verbreitete Schlüsselwortdistributewurde ininter-characterumbenannt; der alte Name ist veraltet.nonewird nicht überall eingehalten. Manche Browser-Engines justieren dennoch die letzte Zeile oder fallen auf den Standardalgorithmus zurück – testen Sie es, anstatt anzunehmen, dass der Blocksatz vollständig deaktiviert ist.- Blocksatz kann „Flüsse" erzeugen – unregelmäßige Weißraumkanäle, die durch einen Absatz verlaufen –, insbesondere in schmalen Spalten. Die Kombination von Blocksatz mit
hyphens: autound einer sinnvollen Zeilenlänge reduziert diesen Effekt. - Die letzte Zeile eines blocksatz-formatierten Blocks wird niemals gestreckt; sie bleibt linksbündig (oder folgt
text-align-last).
Im Zweifelsfall setzen Sie text-justify: auto (oder lassen Sie es weg) und überlassen Sie dem Browser die Wahl der besten Strategie für die Sprache des Inhalts.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
auto | Der Blocksatz-Algorithmus wird festgelegt. Der Browser darf entscheiden, ob inter-word oder inter-character besser für den Blocksatz geeignet ist. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
inter-word | Der Browser vergrößert den Abstand zwischen Wörtern. Dies ist typisch für Sprachen mit klaren Wortgrenzen. | Ausprobieren » |
inter-character | Der Browser vergrößert beim Blocksatz den Abstand zwischen Zeichen. | Ausprobieren » |
none | Der Blocksatz ist deaktiviert. | Ausprobieren » |
initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
text-align— die Eigenschaft, die aufjustifygesetzt sein muss, damittext-justifyeine Wirkung hat.text-align-last— steuert die Ausrichtung der letzten Zeile eines blocksatz-formatierten Blocks.word-spacing— legt den Abstand zwischen Wörtern direkt fest, unabhängig vom Blocksatz.letter-spacing— legt den Abstand zwischen Zeichen (Laufweite) direkt fest.