In HTML gibt es verschiedene Möglichkeiten, Wörter zu trennen, um die Lesbarkeit und Textgestaltung zu verbessern. Die Wahl der Methode hängt von deinen spezifischen Anforderungen und dem gewünschten Ergebnis ab.

HTML-Wörter trennen: Möglichkeiten und Best Practices

Soft Hyphen (­):

Der Soft Hyphen (­) ist ein HTML-Entity, das einen möglichen Trennpunkt innerhalb eines Wortes markiert. Der Browser entscheidet selbst, ob an dieser Stelle eine Trennung erfolgen soll, basierend auf Layout und Textausrichtung.

HTML
<p>Dieser­lange­Text­wird­bei­Bedarf­getrennt.</p>

Vorteile:

Nachteile:

Worttrennungs-Tag (<wbr>):

Das Worttrennungs-Tag (<wbr>) erzwingt an der Stelle, an der es eingefügt wird, einen Zeilenumbruch. Dies kann verwendet werden, um Wörter an bestimmten Stellen zu trennen, unabhängig von der Textausrichtung oder dem Layout.

HTML
<p>Dieses<wbr>lange<wbr>Wort<wbr>wird<wbr>immer<wbr>getrennt.</p>

CSS-Eigenschaft „hyphens“:

Die CSS-Eigenschaft "hyphens" bietet erweiterte Kontrolle über die Silbentrennung in HTML. Du kannst damit festlegen, ob und wie Wörter getrennt werden sollen.

CSS
p {
  hyphens: auto; /* Automatische Silbentrennung */
  word-break: break-all; /* Wörter an Zeilenenden umbrechen */
}

Vorteile:

Nachteile:

Fazit:

Über mich