Comment éviter les sauts de ligne dans les éléments de liste à l'aide de CSS

513

J'essaie de mettre un lien appelé Soumettre CV dans un menu à l'aide d'une libalise. En raison de l'espace entre les deux mots, il se compose de deux lignes. Comment empêcher ce wrapping avec CSS?

html css word-wrap Rajasekar
la source

Réponses:

969

Utilisez white-space: nowrap;[1] [2] ou donnez plus d'espace à ce lien en définissant lila largeur de la valeur sur des valeurs supérieures.

[1] § 3. Espace blanc et habillage: la propriété espace blanc - Module de texte CSS W3 niveau 3
[2] espace blanc - CSS: feuilles de style en cascade | MDN

n1313
la source
41
Vous devriez faire référence au W3C au lieu de ce site Web w3schools redouté et souvent incorrect. w3.org/TR/css3-text/#white-space0
Sebastien Martin
53
Ou référencez simplement Mozilla Developer's Network developer.mozilla.org/en-US/docs/CSS/CSS_Reference
Chris Esplin
4
J'ai empêché les sauts de ligne dans les éléments li en utilisant display: inline;. Peut-être que cela aidera également d'autres personnes ayant des problèmes similaires.
Il est important de faire attention à l'affichage: en ligne car cela peut avoir des effets secondaires. espace blanc: nowrap; n'a qu'un seul effet.
Crispen Smith
Dans ce cas, un débordement de texte se produit. comment éviter cela?
147

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

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}
JimmyRare
la source
Je cherchais une solution de serrage de texte, mais je m'en
tiendrai
33

Si vous souhaitez y parvenir de manière sélective (c'est-à-dire uniquement vers 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 qu'il s'agit de HTML, pas de CSS comme demandé par l'OP, mais certains peuvent le trouver utile…

ptim
la source
14

affichage: bloc en ligne; empêchera la rupture entre les mots d'un élément de liste

 li {
    display: inline-block;
 }
Nadeesh Peiris
la source
1
Si je clique sur jsfiddle et ajuste la largeur de la sortie, les éléments de liste individuels se brisent entre le mot "liste" et le nombre, ce qui est exactement ce que l'OP ne veut pas ...
GentlePurpleRain
4

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

Yevgeniy Afanasyev
la source
2
Je préfère éviter de recommander l'utilisation de Bootstrap en 2019.
Broda Noel
2
@BrodaNoel Pourquoi?
Yevgeniy Afanasyev