Wie erstelle ich ein responsives Trennzeichen für horizontale Listen, das bei Zeilenumbrüchen verschwindet?

Responsives Trennzeichen für horizontale Liste

Frage:

Wie können Sie Trennzeichen in der Zeile entfernen? Brüche, die durch Änderungen im Ansichtsfenster verursacht werden Größe?

Beispiel:

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

Wenn sich das Ansichtsfenster verengt:

Item 1	Item 2	Item 3
Item 4	Item 5

Beachten Sie, dass das Trennzeichen am Zeilenumbruch bleibt.

Mögliche Lösung:

Nur ​​CSS:

Sie können das Reduzieren von nutzen Nachgestellte Leerzeichen:

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 ein responsives Trennzeichen für horizontale Listen, das bei Zeilenumbrüchen verschwindet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!