web-dev-qa-db-fra.com

débordement css - 1 seule ligne de texte

J'ai div avec le style CSS suivant:

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

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

Je pensais au réglage de la hauteur mais cela semble être faux.

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

Comment puis je faire ça?

htmlcssoverflow
119
some Folk

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

310
Septnuits

Si vous voulez indiquer qu'il y a encore plus de contenu disponible dans cette div, vous voudrez peut-être afficher les "Ellipsis":

text-overflow: Ellipsis;

Cela devrait être en plus de white-space: nowrap; suggéré par Septnuits.

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

72
Mouli

Vous pouvez utiliser ce code CSS:

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

La propriété text-overflow de CSS traite les situations où le texte est tronqué lorsqu'il déborde du cadre de l'élément. Il peut être découpé (coupé, masqué), afficher un Ellipsis ('…', valeur de plage Unicode U + 2026).

Notez que text-overflow ne se produit que lorsque la propriété overflow du conteneur a la valeur hidden, scroll ou auto et - white-space: nowrap;.

Le débordement de texte ne peut se produire que sur les éléments bloc ou bloc en ligne, car l'élément doit avoir une largeur pour pouvoir être surchargé. Le débordement se produit dans la direction déterminée par la propriété direction ou les attributs associés.

33
Gaurav Tripathi

le meilleur code pour UX et UI est

white-space: nowrap;
text-overflow: Ellipsis;
overflow: hidden;
display: inherit;
5
Omid Ahmadyani

si addition s'il vous plaît, si vous avez un long texte, vous pouvez utiliser ce code ci-dessous;

text-overflow: Ellipsis;
overflow: visible;
white-space: nowrap;

rendre tout le texte de la ligne visible.

1
shafii muhudi