dotdotdot.js ne fonctionne qu'après un redimensionnement de la fenêtre

Question

J'essaie d'ajouter une ellipse à plusieurs paragraphes multilignes de mon site Web lorsqu'ils dépassent une certaine hauteur. À cette fin, j'utilise pointdotdot le plugin jquery.

Ce qui est bizarre, c'est que cela ne fonctionne pas lorsque je rafraîchis la page. Il ne fonctionne qu'après avoir redimensionné la fenêtre (et ensuite il fonctionne parfaitement). J'ai déjà essayé de mettre tous les scripts à la fin de mon html pour que dotdotdot soit chargé en dernier, mais ça ne fonctionne toujours pas correctement. Quelqu'un sait-il pourquoi cela se produit ?

J'utilise ces paramètres pour dotdotdot :

$(document).ready(function() {
    $("p.article-content").dotdotdot(
    {
        /* The HTML to add as ellipsis. */
        ellipsis : '...',

        /* How to cut off the text/html: 'word'/'letter'/'children' */
        wrap : 'word',

        /* jQuery-selector for the element to keep and put after the ellipsis. */
        after : null,

        /* Whether to update the ellipsis: true/'window' */
        watch : true,

        /* Optionally set a max-height, if null, the height will be measured. */
        height : null,

        /* Deviation for the height-option. */
        tolerance : 0,

        /* Callback function that is fired after the ellipsis is added,
        receives two parameters: isTruncated(boolean), orgContent(string). */
        callback : function( isTruncated, orgContent ) {},

        lastCharacter : {
            /* Remove these characters from the end of the truncated text. */
            remove : [ ' ', ',', ';', '.', '!', '?' ],

            /* Don't add an ellipsis if this array contains
            the last character of the truncated text. */
            noEllipsis : []
        }
    });
});

Le HTML pertinent est (c'est moche, je sais, je suis encore en train de l'expérimenter) :

<article class="article">
  <div class="article-image"></div>
  <h2>Title</h2>
  <p class="date">December 19, 2012</p>
  <p class="article-content">Lorem ipsum etc. (the actual content is larger)</p>
</article>

Et le CSS :

article {
  font-size: 99%;
  width: 28%;
  line-height: 1.5;
  float: left;
  margin-left: 8%;
  margin-bottom: 3em;
  text-align: justify;
}

article h2 {
  font-size: 125%;
  line-height: 0.5;
  text-transform: uppercase;
  font-weight: normal;
  text-align: left;
  color: rgba(0,0,0,0.65);
}

.date {
  margin-top: 0.3em;
  margin-bottom: 1em;
  font-family: 'PT Sans';
  color: rgba(0,0,0,0.5);
}

.article-image {
  background-image: url(http://lorempixel.com/g/400/300/city/7);
  width: 100%;
  height: 13em;
  overflow: hidden;
  margin-bottom: 1.5em;
}

p.article-content {
  font-family   : 'PT Sans';
  color         : rgba(0,0,0,0.65);
  margin-bottom : 0;
  height        : 7em;
  overflow      : hidden;
}

Answer 1

J'ai eu un problème similaire. J'ai dû placer l'initialisation de dotdotdot dans un eventhandler de chargement de fenêtre au lieu du dom ready.

Answer 2

Au début, ça semblait si facile avec dotdotdot. Mais j'ai eu ce problème aussi avec une page responsive qui contenait beaucoup de contenu. Après que le document soit prêt, les conteneurs sur la page sont toujours redimensionnés parce que le contenu se remplit. Avec l'aide de vos commentaires, j'ai trouvé la solution :

$(document).ready(ellipsizeText);        // Plugin must have been working flawles inhere as described in documentation.
window.setTimeout(ellipsizeText, 400);   // Just for any case.
window.setTimeout(ellipsizeText, 800);   // Maybe user didn't saw it flickering.
$(window).load(ellipsizeText);           // Oh hell! the images are loading so not all containers are yet on their places. We wait on them..
function ellipsizeText()
{
    $(".selectorForEllipsis").dotdotdot({
        watch: true
    });
}

Je pense que la bonne solution serait d'ajouter un écouteur à chaque conteneur contenant du texte lorsque celui-ci change de position ou de taille pour mettre à jour dotdotdot, et pas seulement pour redimensionner la fenêtre. Peut-être qu'avec Ben Alman yquery resize plugin

Ou existe-t-il un plugin qui gère mieux ces problèmes de chargement de contenu ?

Answer 3

Ou bien, il suffit d'envelopper l'ensemble de la fonction dans une balise .resize() fonction. Ce n'est pas la solution la plus élégante, mais elle fonctionne :

$(document).ready(function() {
    $(window).resize(function()
    {
        $("p.article-content").dotdotdot(
        {
            // All your code goes here
        });
    }).resize();

    // The second .resize() will fire when the document is ready (i.e. onload),
    // therefore executing .dotdotdot() upon loading
});

[Edit] : Selon la suggestion de Kevin, puisque .dotdotdot() écoute déjà l'événement de redimensionnement, vous n'avez même pas besoin d'envelopper la fonction. Il suffit de déclencher l'événement lorsque le document est prêt, en utilisant la fonction $(window).resize() .

Answer 4

Changé de montre : "fenêtre" en watch : true

et ça a commencé à fonctionner pour moi !