CSS word-spacing-Eigenschaft
Die word-spacing-Eigenschaft ermöglicht es, den Abstand zwischen den Wörtern in einem Text zu ändern, nicht jedoch zwischen den einzelnen Zeichen.
Diese Eigenschaft kann entweder einen positiven oder einen negativen Wert annehmen. Ein positiver Wert fügt zusätzlichen Abstand zwischen den Wörtern hinzu, während ein negativer Wert den Abstand zwischen den Wörtern verringert. Wenn die Eigenschaft auf „normal“ gesetzt ist, bestimmt die definierte Schriftart den Abstand zwischen den Wörtern.
Um den Abstand zwischen Inline-Block-Elementen zu entfernen, können Sie die font-size des Containers auf 0 setzen oder negative Außenabstände (Margins) verwenden.
Die word-spacing-Eigenschaft kann mit der transition-Eigenschaft animiert werden.
INFO
Die word-spacing-Eigenschaft wird auf Inline-Inhalte angewendet.
| Startwert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | 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 für die word-spacing-Eigenschaft mit dem Wert „normal“:
Beispiel für die 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 für die word-spacing-Eigenschaft in „px“ angegeben:
Beispiel für die 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
Werte
| Wert | Beschreibung | Demo |
|---|---|---|
| normal | Gibt den normalen Wortabstand an. Dies ist der Standardwert dieser Eigenschaft. | Demo » |
| length | Gibt einen zusätzlichen Wortabstand an. Kann in px, pt, cm, em usw. angegeben werden. Negative Werte sind gültig. | Demo » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Demo » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Practice
Was bewirkt die CSS-Eigenschaft 'word-spacing'?