Mit CSS und word-spacing für Wortabstand sorgen

Abstand zwischen den Wörtern per CSS definieren

Letter-spacing ist eine schöne Möglichkeit, um den Abstand zwischen den Buchstaben per CSS vorzudefinieren, wird aber selten genutzt, obwohl es eine interessante Lösung als Alternative zu kursiv und fett sein kann. Noch unbekannter ist die Möglichkeit, den Abstand zwischen den einzelnen Worten mit CSS festzulegen, dabei ist die Definition sehr einfach umgesetzt und erfolgt über den CSS-Befehl word-spacing.

Im Prinzip arbeitet der Befehl auf ähnliche Weise und kann per Pixel oder auch mit Prozentwerten eingestellt werden. Damit erzielt man ein ganz anderes Erscheinungsbild, was vor allem grafisch eingesetzt werden könnte. Im normalen Text ist das wohl eher keine so günstige Option.

Abstand zwischen den Wörtern mit CSS und word-spacing einstellen

---

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

---

Eingesetzt wird der Befehl in folgender Weise:

word-spacing: 6px;
word-spacing: 5mm;
word-spacing: 5%;

Die Beispiele zeigen, dass man den Befehl word-spacing mit unterschiedlichen Werten ausstatten kann. Prozentwerte sind ebenso möglich wie Millimeterangaben oder Pixelwerte.

<p style="word-spacing: 5mm;">word-spacing: 5mm;</p> <p style="word-spacing: 6px;">word-spacing: 6px;</p> <p style="word-spacing: 3px;">word-spacing: 3px;</p> <p style="word-spacing: 4%;">word-spacing: 4%;</p>

ergibt:

word-spacing: 5mm;

word-spacing: 6px;

word-spacing: 3px;

word-spacing: 4%;

In diesen vier Beispielen sieht man den Abstand zwischen dem Ausdruck word-spacing und dem Wert dahinter. Der größte Abstand ist in diesem Fall mit der Einstellung 5 Millimeter erreicht worden. Beim normalen Artikel wird man so eine Lösung nicht anstreben, aber bei Zitate oder künstlerischen Textpassagen kann dies durchaus interessant sein.

Lesen Sie auch

---

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

---

Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.

• Schriftart (font-family)
• Schriftgröße (font-size)

Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.

• Fettschrift (font-weight)
• Schriftstil (font-style)
• Textfarbe (color)
• Textdekoration (text-decoration)

Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.

• Schriftvariante (font-variant)
• Zeichenabstand (letter-spacing)
• Wortabstand (word-spacing)
• Textumwandlung (text-transform)
• Textschatten (text-shadow)

Themenseiten

Diesen Artikel teilen

• 
• 
• 
• 
• 

Infos zum Artikel

Artikel-Thema: Mit CSS und word-spacing für Wortabstand sorgen
Beschreibung: Mit CSS und der Einstellung 👍 word-spacing kann man den ✅ Abstand zwischen den einzelnen Wörtern im Text verändern.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel