Comment empêcher les sauts de ligne dans les éléments de la liste à L'aide de CSS
J'essaie de mettre un lien appelé Submit resume dans un menu en utilisant une balise li. En raison de l'espace entre les deux mots, il s'affiche sur deux lignes. Comment empêcher cet emballage avec CSS?
5 réponses
Vous pouvez ajouter ce petit extrait de code pour ajouter une belle"..."à la fin de la ligne si le contenu est trop grand pour tenir sur une ligne:
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Si vous voulez réaliser ceci sélectivement( ie: seulement à ce lien particulier), vous pouvez utiliser un espace non-cassant au lieu d'un espace normal:
<li>submit resume</li>
Http://en.wikipedia.org/wiki/Wikipedia:Line-break_handling#.26nbsp.3B
edit: je comprends que C'est HTML, pas CSS comme demandé par L'OP, mais certains peuvent le trouver utile ...
Display: inline-block; {[3] } empêchera les sauts de ligne dans les éléments de la liste
Http://jsfiddle.net/Nash171/mwe4s0nc/46/
li{
display: inline-block;
}
Bootstrap 4 dispose d'une classe nommée text-nowrap. C'est juste ce dont vous avez besoin.