Comment puis-je supprimer de manière réactive les séparateurs dans les listes horizontales ?

Suppression réactive des séparateurs pour les listes horizontales

Dans le contexte d'une liste disposée horizontalement, il peut être souhaitable de supprimer les séparateurs qui apparaissent lorsque la liste passe à un nouveau ligne en raison d’une taille de fenêtre d’affichage insuffisante. Cet article explore les méthodes permettant de réaliser cette suppression réactive des séparateurs.

Solution CSS uniquement

Une approche qui exploite CSS est basée sur le fait que les espaces blancs de fin et de fin de ligne s'effondrent automatiquement. En ajoutant intentionnellement de l'espace après chaque élément de la liste, les séparateurs peuvent être efficacement supprimés. Le code CSS suivant illustre cette technique :

b {
    background: red;
    outline: 1px solid blue;
}

div {
    resize: both;
    overflow: hidden;
}

document.write(`<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!