Wie verhindert man Zeilenumbrüche in Listenelement-Hyperlinks mit CSS?

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 umgebrochen 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, sodass er in eine Zeile passt:

li {
  width: 200px;
}

Beide Lösungen verhindern wirksam, dass der Link umgebrochen wird, während die Lesbarkeit der Liste erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie verhindert man Zeilenumbrüche in Listenelement-Hyperlinks mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!