Comment empêcher les sauts de ligne dans les hyperliens d'éléments de liste avec CSS ?

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 la 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 lien de s'enrouler tout en conservant la lisibilité de la liste.

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!