Comment empêcher le contenu en ligne de se retourner?

Question

J'ai des éléments de menu qui ressemblent à ceci

  Item1
  Item2
  Item3

avec du CSS qui transforme ce qui précède en menu horizontal, et du JS qui transforme les [span] en boutons qui font apparaître des menus contextuels. Vaguement comme ceci:

Item1^  Item2^  Item3^

Si le menu devient trop large pour la largeur du navigateur, il se met en ligne, ce qui est ce que je veux. Le problème est que parfois il insère des sauts de ligne avant les [span]. Je veux seulement qu'il se divise entre les [li]. Des idées ?

Answer 1

Essayez d'utiliser

white-space: nowrap;

dans la définition CSS de votre classe context-trigger.

Édit : Je pense que patmortech a raison cependant, mettre nowrap sur le span ne fonctionne pas, car il n'y a pas de contenu "white space". Il se peut également que mettre le style sur l'élément LI ne fonctionne pas non plus, car le navigateur pourrait diviser les parties car le span est un élément imbriqué dans li. Vous devriez reconsidérer votre code, supprimer l'élément SPAN et utiliser du CSS sur les éléments LI.

Answer 2

Vous devez mettre ce qui suit pour empêcher votre élément de liste de se retourner (le mettre dans la classe context-trigger ne ferait que garder le contenu du span de se retourner) :

li { white-space:nowrap; }

Answer 3

Si vous flottez les éléments

• , vous devriez obtenir l'effet que vous souhaitez.