css ellipsis sur la deuxième ligne

Question

CSS text-overflow: ellipsis sur la deuxième ligne, est-ce possible ? Je ne le trouve pas sur le net.

exemple :

ce que je veux c'est comme ça

I hope someone could help me. I need 
an ellipsis on the second line of...

mais ce qui se passe, c'est ça,

I hope someone could help me. I ...

Answer 1

Cela fonctionne pour moi dans webkit :

text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Answer 2

Une exigence pour text-overflow: ellipsis; pour fonctionner est une version en une ligne de white-space ( pre , nowrap etc). Ce qui signifie que le texte n'atteindra jamais la deuxième ligne.

Ergo. Impossible en CSS pur.

Ma source quand je cherchais exactement la même chose à l'instant : http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw !)

EDIT Si les dieux du CSS veulent bien mettre en place http://www.w3.org/TR/css-overflow-3/#max-lines nous pouvons le faire en pure CSS en utilisant fragments (nouveau) et max-lines (nouveau). Également quelques informations supplémentaires sur http://css-tricks.com/line-clampin/

Answer 3

Comme d'autres ont déjà répondu, une solution CSS pure n'existe pas. Il existe une jQuery qui est très facile à utiliser, il s'appelle pointdotdot . Il utilise la largeur et la hauteur du conteneur pour calculer s'il doit tronquer et ajouter des ellipses.

$("#multilinedElement").dotdotdot();

Voici un jsFiddle .

Answer 4

Quel dommage que vous ne puissiez pas le faire fonctionner sur deux lignes ! Ce serait génial si l'élément était un bloc d'affichage et que sa hauteur était fixée à 2em ou quelque chose comme ça, et que lorsque le texte débordait, il affichait une ellipse !

Pour une seule doublure, vous pouvez utiliser :

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Pour les lignes multiples, vous pouvez peut-être utiliser un Polyfill tel que jQuery autoellipsis qui se trouve sur github. http://pvdspek.github.com/jquery.autoellipsis/

Answer 5

J'ai utilisé le jQuery-condense-plugin avant, qui semble pouvoir faire ce que vous voulez. Sinon, il y a différents plugins qui pourraient répondre à vos besoins.

Edit : Made you a Démonstration - Notez que j'ai lié le jquery.condense.js sur la démo qui fait la magie, donc tout le mérite revient à l'auteur de ce plugin :)