Wortzwischenraum mit word-spacing einstellen

Wenn man auf Websites Texte einfügt, dann werden die einzelnen Wörter gewöhnlich mit einem Leerzeichen voneinander getrennt. Diese führen zu gewissen Abständen zwischen den Wörtern, die von verschiedenen Faktoren abhängen, z.B. von der Schriftgröße, Schriftart oder vom Browser, mit dem die Website betrachtet wird. Es kann manchmal vorkommen, dass man die Größe der Wortzwischenräume ändern möchte.

Text mit großem Zwischenraum

Um die Abstände zwischen den Wörtern einzustellen, kann man in CSS die Eigenschaft word-spacing verwenden. Anhand eines Beispiels ist nachfolgend die Syntax abgebildet.

CSS-Code mit word-spacing

Werte für word-spacing

Die folgenden Werte kann man für word-spacing angeben.

Numerische Werte mit Einheit

  • <Zahl>px (Pixel)
  • <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
  • <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
  • <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
  • <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
  • <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
  • <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
  • <Zahl>vmin (der kleinere Wert von vw oder vh)
  • <Zahl>vmax (der größere Wert von vw oder vh)
  • <Zahl>pt (Punkt)
  • <Zahl>pc (Pica)
  • <Zahl>in (Inch)
  • <Zahl>mm (Millimeter)
  • <Zahl>cm (Zentimeter)

Keyword-Werte

  • normal (Standardwert, normaler Abstand)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt vom Elternelement)

Nachfolgend ist ein Beispielcode sowie die Abbildung von der Darstellung im Browser.

.selektor1 {
word-spacing: 10px;
}

.selektor2 {
word-spacing: 20px;
}

.selektor3 {
word-spacing: 30px;
}

p {
margin: 2px;
padding: 5px;
width: 400px;
font-size: 18px;
height: 60px;
line-height: 60px;
border: 1px solid #001055;
}
<p class="selektor1">Text mit 10px Zwischenraum</p>
<p class="selektor2">Text mit 20px Zwischenraum</p>
<p class="selektor3">Text mit 30px Zwischenraum</p>
Text mit größerem word-spacing

Die Eigenschaft word-spacing gibt es bereits seit CSS1. Dementsprechend ist die Unterstützung durch die Browser weitestgehend gegeben und man kann damit zuverlässig die Zwischenräume steuern.