Les navigateurs mult-lignes débordement de texte avec les points de suspension ajoutées dans une largeur & hauteur fixe div ?

Question

J’ai fait une image pour cette question, devrait être plus facile à comprendre.

J’ai essayé quelques plugins jquery ici et là, mais impossible de trouver celui que je cherche. Toute recommandation ? idées ?

Answer 1

Juste une petite idée de base.

J'ai été le tester avec le texte suivant:

<div id="fos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>  
</div>

Et CSS:

#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }

L'application de cette jQuery permettra d'obtenir le résultat désiré:

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

Il essaie à plusieurs reprises de supprimer le dernier mot du texte jusqu'à ce qu'il atteigne la taille souhaitée. En raison de la overflow: hidden; le processus reste invisible et même avec JS désactivé, le résultat est visuellement correct " (sans les "..." bien sûr).

Si vous combinez cela avec un sensible troncature sur le côté serveur (qui ne laisse qu'une faible charge) puis il va courir plus vite :).

Encore une fois, ce n'est pas une solution complète, juste une idée.

Mise à JOUR: Ajout d'un jsFiddle Démo.

Answer 2

Essayez le plugin jQuery.dotdotdot .

Answer 3

Il n'y a pas une telle caractéristique dans le HTML, et c'est très frustrant.

J'ai développé une bibliothèque de traiter avec cela.

• Multiline text-overflow: ellipsis
• Texte multiligne avec des technologies qui ne prend pas en charge: SVG, Canvas par exemple
• Ont exactement les mêmes sauts de ligne dans votre texte SVG, dans votre HTML, et dans votre exporter en PDF par exemple

Consultez mon site pour la capture d'écran, les tutoriels et les télécharger sur le lien.

Answer 4

Solution JS purement basée sur la solution de bažmegakapa et peu de nettoyage pour tenir compte des gens qui essaient de donner une hauteur/max-hauteur inférieure à lineHeight de l’élément :

Answer 5

J'ai une solution qui fonctionne bien, mais à la place des points de suspension, il utilise un dégradé. Les avantages sont que vous n'avez pas à faire toute JavaScript calculs, et il fonctionne pour largeur variable conteneurs, y compris les cellules d'un tableau. Il utilise un couple d'extra divs, mais il est très facile à mettre en œuvre.

http://salzerdesign.com/blog/?p=453

Edit: Désolé, je ne sais pas que le lien n'était pas assez. La solution est de mettre un div autour du texte et le style de la div pour le contrôle de la zone de débordement. À l'intérieur de la div mettre une autre div avec un "fondu" de gradient qui peut être fait par l'utilisation de CSS ou une image (pour les vieux IE). Le dégradé va de la transparence à la couleur de fond de la cellule du tableau et est un peu plus large que les points de suspension. Si le texte est long et débordements, il passe sous le "fade" div et regarde "disparu". Si le texte est court, le fondu est invisible, donc il n'y a pas de problème. Les deux conteneurs peuvent être ajustés pour permettre à une ou plusieurs lignes à afficher par le réglage de la hauteur du conteneur comme un multiple de la ligne de texte à la hauteur. Le "fade" div peut être positionné de façon à ne couvrent que la dernière ligne.