text-overflow: ellipsis ne fonctionne pas

Question

C'est ce que j'ai essayé (voir ici):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Essentiellement, je veux la durée de diminuer avec des points de suspension lorsque la fenêtre est petite. Qu'ai-je fait de mal?

Answer 1

Vous n'avez rien fait de mal. Il n'est pas pris en charge dans tous les navigateurs encore. Il y a un plugin jQuery points de suspension qui vous permet d'utiliser ce code css dans n'importe quel navigateur.

---

Modifier
Correction, Vous devez avoir CSS overflow et une largeur.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Answer 2

Assurez-vous d'avoir un élément de bloc, un maximum de la taille et de dépassement de caché. (Testé dans IE9 et FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Answer 3

Pour le multi-lignes en Chromé utilisation :

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Inspiré de youtube ;-)

Answer 4

word-wrap: break-word;

ce que ce fait le travail pour moi pour un

<pre> </pre> 

tag

tout le reste a échoué à faire les points de suspension....

Answer 5

pour la compatibilité du navigateur, je pense que le javascript doit le faire pour vous... https://github.com/STAR-ZERO/jquery-ellipsis