débordement css - seulement 1 ligne de texte

134

J'ai divavec le style css suivant:

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

Lorsque j'insère, dans cela 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 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 cela semble être faux.

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

Comment puis je faire ça?

html css overflow Home Run
la source
Pouvez-vous démontrer votre problème sur jsFiddle ?
Harry Joy

Réponses:

352

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

Septnuits
la source
Mais alors, il n'affiche pas les points de suspension si le texte dépasse la dimension spécifiée. stackoverflow.com/questions/26342411/…
SearchForKnowledge
Cela fonctionne, très bien. Mais j'ai besoin ...s'il y a plus de caractère à montrer parce que quand la longueur de la ligne est longue et qu'elle sort du div écrit.
Moshii le
Cela fait bizarre si le texte masqué contient des hyperliens. Si je devais parcourir la page, cela ferait défiler le lien dans le texte caché sur l'écran, alors qu'il devrait être caché.
Eric
76

Si vous souhaitez indiquer qu'il y a encore plus de contenu disponible dans cette division, vous souhaiterez probablement afficher les «points de suspension»:

text-overflow: ellipsis;

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

Assurez-vous également de consulter ce fil pour gérer cela dans Firefox.

Mouli
la source
47
Je crois que vous devez utiliser text-overflow: ellipsis;avec overflow: hidden;et white-space: nowrap;pour le faire fonctionner
Francisco Costa
caniuse.com/#feat=text-overflow aka. Oui, vous pouvez. Pensez à mettre tout le contenu dans l'attribut title, afin que l'utilisateur y ait toujours accès.
DanMan
le mien montre juste dans une ligne et ne remplit pas le DIV avant d'afficher les points de suspension ... stackoverflow.com/questions/26342411/… ( jsfiddle.net/ofrj55j4/20 )
SearchForKnowledge
44

Vous pouvez utiliser ce code css:

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

La propriété text-overflow dans CSS traite des situations où le texte est coupé lorsqu'il déborde de la boîte de l'élément. Il peut être tronqué (c'est-à-dire coupé, masqué), afficher une ellipse ('…', Unicode Range Value U + 2026).

Notez que le dépassement de texte se produit uniquement lorsque la propriété de dépassement de capacité du conteneur a la valeur hidden , scroll ou auto et white-space: nowrap; .

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

Gaurav Tripathi
la source
6

le meilleur code pour UX et UI est

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
Omid Ahmadyani
la source
0

en cas d'ajout s'il vous plaît, si vous avez un long texte, vous pouvez utiliser ce code css ci-dessous;

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

rendre le texte de la ligne entière visible.

shafii muhudi
la source
0 
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

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

Jaydeep Kataria
la source
-2

J'ai eu le même problème et je l'ai résolu en utilisant:

display: inline-block;

sur le diven question.

Dekcolnu
la source