Prévention des sauts de ligne dans les éléments de liste avec CSS

Lors de l'ajout d'hyperliens vers des éléments de liste à l'aide de balises li, les espaces entre les mots peuvent entraîner le lien vers envelopper sur plusieurs lignes. CSS propose des solutions pour résoudre ce problème.

Solution 1 : propriété White-Space

La propriété white-space vous permet de contrôler la façon dont les espaces blancs sont gérés dans un élément. . En définissant white-space: nowrap; sur la balise li, vous pouvez empêcher le retour à la ligne du lien :

li {
  white-space: nowrap;
}

Solution 2 : augmenter la largeur des éléments de liste

Si vous ne souhaitez pas éliminer tous les espaces blancs, vous pouvez augmenter la largeur de la balise li. Cela donne au lien plus d'espace pour tenir sur une seule ligne :

li {
  width: 200px;
}

Les deux solutions empêchent efficacement le retour à la ligne du lien tout en conservant la lisibilité de la liste.