Comment empêcher les sauts de ligne dans les éléments de liste à l'aide de CSS

Question

J'essaie de mettre un lien appelé Soumettre le CV dans un menu en utilisant une balise li. En raison de l'espace entre les deux mots, il se réduit à deux lignes. Comment empêcher ce wrapping avec CSS?

Answer 1

Utilisez white-space: nowrap;¹, ou donnez à ce lien plus d’espace en définissant la largeur de li sur des valeurs supérieures.

Answer 2

Vous pouvez ajouter ce petit bout de code pour ajouter un joli "..." à la fin de la ligne si le contenu est trop volumineux pour tenir sur une seule ligne:

li {
  overflow: hidden; 
  text-overflow: Ellipsis;
  white-space: nowrap;
}

Answer 3

Si vous souhaitez y parvenir de manière sélective (c'est-à-dire: uniquement pour ce lien particulier), vous pouvez utiliser un espace insécable au lieu d'un espace normal:

<li>submit&nbsp;resume</li>

https://en.wikipedia.org/wiki/Non-breaking_space#Encodings

edit: Je comprends que c'est du HTML, pas du CSS comme demandé par l'OP, mais certains peuvent trouver cela utile…

Answer 4

display: inline-block; empêchera les sauts de ligne dans les éléments de liste

http://jsfiddle.net/Nash171/mwe4s0nc/46/

 li{
    display: inline-block;
 }

Answer 5

Bootstrap 4 a une classe nommée text-nowrap. C'est exactement ce dont vous avez besoin.