comment cacher des textes trop longs dans les éléments div?

Question

Comment pouvez-vous cacher le débordement dans un div?

Ici, le texte passe automatiquement juste en bas à une nouvelle ligne si le texte est plus long que le div

<div style="width:50px; border:1px solid black; overflow-y:hidden"> 
    test test test test 
</div> 

Answer 1

essayer overflow: none;

vous n'avez pas mentionné si vous voulez des barres de défilement ou non.

EDIT:

Désolé, je voulais dire overflow: hidden.

Answer 2

Vous devez spécifier un height pour votre div, overflow: hidden; ne peut masquer le contenu vertical débordant s'il existe une sorte de hauteur définie.

En d'autres termes:

Voici le texte enveloppe juste en bas à une nouvelle ligne si le texte est plus longue que la div

Mais combien de temps est que div en réalité?

Veuillez consulter my jsFiddle demonstration qui illustre la différence.

Answer 3

Si vous ne souhaitez afficher qu'une seule ligne de texte dans une div à largeur fixe, exécutez white-space:nowrap. Avec overflow:hidden, il forcera votre navigateur à ne pas casser la ligne et recadrer la vue à votre largeur forcée.

Vous pouvez également ajouter text-overflow:ellipsis pour éviter de couper des mots et des lettres en deux, cela ajoute un joli ... à la fin pour vous montrer qu'il manque quelques bits. Je ne suis pas sûr du support du navigateur, et je n'ai jamais essayé celui-ci.

Answer 4

La propriété CSS text-overflow: ellipsis peut peut-être vous aider avec ce problème.

Considérez ceci HTML ci-dessous:

<div id="truncateLongTexts"> 
    test test test test 
</div> 

#truncateLongTexts { 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis // This is where the magic happens 
}