Verhindern von Zeilenumbrüchen in Listenelementen mit CSS

Beim Hinzufügen von Hyperlinks zu Listenelementen mithilfe von li-Tags können Leerzeichen zwischen Wörtern dazu führen, dass der Link beschädigt wird Umbruch in mehrere Zeilen. CSS bietet Lösungen zur Behebung dieses Problems.

Lösung 1: White-Space-Eigenschaft

Mit der White-Space-Eigenschaft können Sie steuern, wie Leerraum innerhalb eines Elements behandelt wird . Indem Sie white-space: nowrap; für das li-Tag festlegen, können Sie verhindern, dass der Link umbrochen wird:

li {
  white-space: nowrap;
}

Lösung 2: Erhöhen der Breite des Listenelements

Wenn Sie nicht den gesamten Leerraum entfernen möchten, können Sie die Breite des li-Tags erhöhen. Dadurch erhält der Link mehr Platz und passt in eine Zeile:

li {
  width: 200px;
}

Beide Lösungen verhindern effektiv das Umbrechen des Links und sorgen gleichzeitig für die Lesbarkeit der Liste.