CSS word-spacing Eigenschaft
Verwenden Sie die CSS-Eigenschaft word-spacing, um den Abstand zwischen Wörtern in einem Text festzulegen. Lesen Sie über Eigenschaftswerte und probieren Sie Beispiele aus.
Die CSS-Eigenschaft word-spacing steuert den Abstand zwischen Wörtern in einem Text. Sie addiert (oder subtrahiert) den Standardabstand, den die Schriftart bereits nach jedem Leerzeichen platziert — sie passt also den Abstand zwischen Wörtern an, nicht den Abstand zwischen einzelnen Buchstaben. Für den Abstand zwischen Buchstaben verwenden Sie stattdessen letter-spacing.
Diese Seite behandelt die Syntax, alle akzeptierten Werte, das Verhalten von positiven und negativen Längen, die verwendbaren Einheiten, Überlegungen zur Barrierefreiheit und ausführbare Beispiele.
Wie es funktioniert
Der Browser beginnt mit dem Wortabstand, der durch die Schriftart definiert wird. Der Wert, den Sie word-spacing zuweisen, wird zusätzlich zu diesem Ausgangswert addiert:
- Ein positiver Wert vergrößert den Abstand zwischen Wörtern.
- Ein negativer Wert verringert den Abstand zwischen Wörtern (und kann sie bei ausreichend großem Wert überlappen lassen).
- Das Schlüsselwort
normalsetzt auf den Standardabstand der Schriftart zurück — es entspricht0, ist aber der Anfangswert der Eigenschaft und keine konkrete Länge.
Da word-spacing auf die durch Leerzeichen erzeugten Abstände wirkt, betrifft es nur Inline-Inhalte. Die Eigenschaft wird außerdem vererbt, sodass die Einstellung an einem Container auf alle untergeordneten Texte angewendet wird, sofern ein untergeordnetes Element sie nicht überschreibt.
Wann sollte ich es verwenden?
- Lesbarkeit — ein leichtes Vergrößern der Wortabstände kann dichte oder in Großbuchstaben geschriebene Überschriften leichter erfassbar machen.
- Display-Schrift — Tracking einer logoartigen Überschrift für einen bewussten, luftigen Look.
- Verdichten — ein kleiner negativer Wert kann Platz in einem beengten Layout zurückgewinnen, sollte aber sparsam eingesetzt werden.
Für den meisten Fließtext sollte die Einstellung auf normal belassen werden; große Wortabstände verlangsamen das Lesen eher, als dass sie es unterstützen.
Die Eigenschaft word-spacing ist animierbar und kann daher mit der Eigenschaft transition übergeleitet werden.
word-spacing gilt nur für Inline-Inhalte. Um stattdessen Buchstaben zu beabstanden, siehe letter-spacing; um durch Leerzeichen erzeugten Abstand zu steuern, siehe white-space.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Ja. word-spacing ist animierbar. |
| Version | CSS1 |
| DOM Syntax | object.style.wordSpacing = "40px"; |
Syntax
Syntax der CSS word-spacing Eigenschaft
word-spacing: normal | length | initial | inherit;Beispiel der word-spacing Eigenschaft mit dem Wert "normal":
Beispiel der CSS word-spacing Eigenschaft mit dem Wert normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: normal;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>Im folgenden Beispiel beträgt der Abstand zwischen den Wörtern 20px:
Beispiel der word-spacing Eigenschaft mit Angabe in "px":
Beispiel der CSS word-spacing Eigenschaft mit Längenwert (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: 20px;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>Ergebnis
Beispiel eines negativen word-spacing Werts:
Ein negativer Längenangabe zieht Wörter näher zusammen. Hier wird der Abstand um 3px verringert:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: -3px;
}
</style>
</head>
<body>
<h2>Negative word-spacing example</h2>
<p class="text">Lorem ipsum is simply dummy text of the printing industry.</p>
</body>
</html>Einheiten
Der Wert length akzeptiert jede CSS-Längeneinheit:
- Absolut —
px,pt,cm. Fest, unabhängig von der Schriftgröße. - Relativ —
emundrem. Einem-Wert skaliert mit derfont-sizedes Elements, sodassword-spacing: 0.25emdas Verhältnis beim Wachstum des Textes beibehält. Dies ist in der Regel die robustere Wahl für responsiven Text. Prozentwerte sind nicht erlaubt.
Barrierefreiheit
Gemäß WCAG 1.4.12 (Text Spacing) können Nutzer den Wortabstand auf mindestens 0.16em für bessere Lesbarkeit anpassen. Vermeiden Sie hartcodierte große Pixelwerte, die den Text am Umfließen hindern, und verlassen Sie sich nie allein auf den Wortabstand, um Bedeutung zu vermitteln. Zu großer Abstand kann bei Nutzern mit kognitiven oder visuellen Einschränkungen Wörter auseinanderreißen, daher sollten Anpassungen für Fließtext dezent bleiben.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| normal | Gibt den normalen Wortabstand an. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| length | Gibt einen zusätzlichen Wortabstand an. Kann in px, pt, cm, em usw. angegeben werden. Negative Werte sind gültig. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |