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

J'ai pu obtenir ce résultat en utilisant l'option webkit-line-clamp et le css suivant :

div {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Answer 2

Si vous avez un texte long, vous pouvez utiliser le code css ci-dessous ;

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

rendre visible le texte de la ligne entière.

Answer 3

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

display: inline-block;

sur le div en question.

Answer 4

line-height:335px; 

vous pouvez essayer ceci...