débordement css - seulement 1 ligne de texte

Question

J'ai div avec le style css suivant :

width:335px; float:left; overflow:hidden; padding-left:5px;

Quand j'insère, dans cette div Dans le cas d'une longue ligne de texte, il passe à une nouvelle ligne et affiche tout le texte. Ce que je veux, c'est avoir une seule ligne de texte qui ne saute pas de ligne. Lorsque le texte est long, je veux que ce texte débordant disparaisse.

Je pensais régler la hauteur, mais il semble que ce soit faux.

Peut-être que si j'ajoute une hauteur identique à celle de la police, cela devrait fonctionner et ne pas poser de problèmes dans les différents navigateurs ?

Comment puis-je faire ça ?

Answer 1

Si vous voulez le limiter à une seule ligne, utilisez white-space: nowrap; sur le div.

Answer 2

Si vous voulez indiquer qu'il y a encore du contenu disponible dans cette division, vous pouvez probablement afficher le "ellipsis" :

text-overflow: ellipsis;

Cela devrait s'ajouter à white-space: nowrap; suggéré par Septnuits.

Aussi, assurez-vous de vérifier ce fil pour gérer cela dans Firefox.

Answer 3

Vous pouvez utiliser ce code css :

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

El débordement de texte en CSS permet de traiter les situations où le texte est coupé lorsqu'il déborde du cadre de l'élément. Elle peut être coupé (c'est-à-dire coupée, cachée), afficher une ellipses (" ", valeur de la plage Unicode U+2026).

Notez que débordement de texte ne se produit que lorsque la propriété overflow du conteneur a la valeur caché , défilement o auto y white-space : nowrap ; .

Le débordement du texte ne peut se produire que sur bloc o inline-block car l'élément doit avoir une largeur pour pouvoir être débordé. Le débordement se produit dans la direction déterminée par la propriété direction ou les attributs associés.

Answer 4

Le meilleur code pour l'UX et l'UI est

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

Answer 5

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Définir la largeur également pour définir le débordement sur une ligne