Comment empêcher les sauts de ligne dans les éléments de liste ?

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

Lorsque vous travaillez avec des éléments de liste, il est possible de rencontrer des cas où des sauts de ligne se produisent dans le texte, potentiellement briser des phrases importantes comme « Soumettre un CV ». Cela peut être visuellement peu attrayant et perturber l'expérience utilisateur.

Solution CSS pour empêcher les sauts de ligne :

Pour éviter les sauts de ligne dans les éléments de liste, la propriété d'espace blanc peut être appliqué à la balise li. Le définir sur nowrap empêche efficacement le navigateur d'envelopper le texte de cet élément sur plusieurs lignes. Cela garantit que le texte reste sur une seule ligne.

li {
  white-space: nowrap;
}

Espaces supplémentaires :

Alternativement, si vous le souhaitez, plus d'espace peut être alloué au lien en augmentant la largeur de l'élément li. En définissant la largeur li sur une valeur supérieure à la largeur actuelle, le texte aura suffisamment d'espace pour rester sur une seule ligne sans retour à la ligne.

li {
  width: 200px;
}

En exploitant l'un ou l'autre des espaces blancs : nowrap ; ou en augmentant la largeur du li, vous pouvez empêcher le lien "Envoyer le CV" de s'enrouler et conserver l'apparence visuelle souhaitée dans le menu.

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!