Comment créer des séparateurs réactifs CSS uniquement pour les listes horizontales qui disparaissent lors des sauts de ligne ?

Séparateur CSS uniquement pour une liste horizontale réactive

Dans le contexte d'une navigation réactive, comment les séparateurs entre les éléments de la liste peuvent-ils être supprimés à sauts de ligne induits par la variation de la fenêtre d'affichage tailles ?

Séparateurs réactifs

Considérez le scénario suivant :

• Large Fenêtre :

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

• Petite fenêtre :

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

Cependant, dans certains cas, les séparateurs peuvent persister au niveau des sauts de ligne, comme démontré dans ce violon.

Solution CSS uniquement

En exploitant l'effondrement automatique des espaces blancs de fin de ligne et de fin de ligne, nous pouvons créer des séparateurs réactifs :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!