Wie erstelle ich responsive CSS-Trennzeichen für horizontale Listen, die bei Zeilenumbrüchen verschwinden?

Nur CSS-Trennzeichen für responsive horizontale Liste

Wie können im Kontext der responsiven Navigation Trennzeichen zwischen Listenelementen entfernt werden? Zeilenumbrüche durch unterschiedliche Ansichtsfenstergrößen?

Responsive Trennzeichen

Stellen Sie sich das folgende Szenario vor:

• Breites Ansichtsfenster:

  -> Item 1 | Item 2 | Item 3 | Item 4 | Item 5 <-

  Nach dem Login kopieren

• Klein Ansichtsfenster:

  -> Item 1 | Item 2 | Item 3 <-
  -> Item 4 | Item 5 <-

  Nach dem Login kopieren

In manchen Fällen können jedoch Trennzeichen an den Zeilenumbrüchen bestehen bleiben, wie in dieser Geige gezeigt.

Nur-CSS-Lösung

Durch Ausnutzung der automatischen Reduzierung von nachgestelltem und nachgestelltem Weiß Platz können wir reaktionsfähige Trennzeichen erstellen:

b {
    background: red;
    outline: 1px solid blue;
}
div {
    resize: both;
    overflow: hidden;
}

<div>
word<b> </b>.repeat(42)
</div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich responsive CSS-Trennzeichen für horizontale Listen, die bei Zeilenumbrüchen verschwinden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!