Wie erstelle ich ein responsives horizontales Listentrennzeichen nur mit CSS?

Erstellen eines reaktionsfähigen Trennzeichens für eine horizontale Liste

In der ursprünglichen Frage wünschte sich der Benutzer ein reaktionsfähiges Trennzeichen, das vertikale Linien an der Linie entfernt Unterbrechungen, die durch die Größe des Ansichtsfensters verursacht werden. Beispielsweise könnte in einem breiten Ansichtsfenster Folgendes angezeigt werden:

-> Punkt 1 | Punkt 2 | Punkt 3 | Punkt 4 | Punkt 5

Während ein kleines Ansichtsfenster Folgendes anzeigen könnte:

-> Punkt 1 | Punkt 2 | Punkt 3 -> Punkt 4 | Punkt 5

Nur ​​CSS-Lösung

Als Antwort auf diese Anfrage stellte ein kluger Benutzer eine reine CSS-Lösung zur Verfügung, die die Tatsache ausnutzt, dass Trailing und Zeile Nachgestellte Leerzeichen werden automatisch ausgeblendet:

document.write(`<div>`
+ `word<b> </b>`.repeat(42)
+ `</div>`);

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

Indem wir eine lange Folge wiederholter Wörter erstellen, die durch ein fett gedrucktes Tag getrennt sind, können wir dies tun Erstellen Sie effektiv eine horizontale Linie, die am Zeilenumbruch zusammenbricht, ohne dass vertikale Linien zurückbleiben.

Zusätzliche Überlegungen

Während diese Lösung eine elegante reine CSS-Methode zum Erreichen bietet Um das gewünschte Ergebnis zu erzielen, ist zu beachten, dass es möglicherweise nicht für alle Szenarien geeignet ist. Wenn Sie beispielsweise eine präzise Positionierung benötigen oder das Erscheinungsbild des Trennzeichens anpassen möchten, müssen Sie möglicherweise JavaScript oder einen komplexeren CSS-Ansatz in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein responsives horizontales Listentrennzeichen nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!