jQuery expander avec la propriété max-lines

Question

Je pense vraiment jQuery Expander plugin est super mais il ne peut pas satisfaire mes besoins. Il coupe le texte et met un bouton "lire plus" après le texte qui développe le texte. Mais il ne coupe que lorsque la longueur du texte est supérieure à une valeur spécifiée. Mais si le texte est le suivant:

Some text: 




Blah blah 

Le texte utilise autant d'espace comme un texte avec de nombreux personnages, mais l'extension ne sera pas le couper. Je veux avoir une propriété max lines donc je peux restreindre à la fois la longueur du texte et les lignes max. Des suggestions de plugins?

Answer 1

J'ai construit ce jQuery qui est partiellement extrait du lien de fudgey. Malheureusement, il utilise px au lieu de em car j'ai besoin de comparer la hauteur de la div avec .height(). Il pourrait également être plus joli de le faire à une fonction mais cela fonctionne :)

$(document).ready(function() { 
    var maxlines = 12; 
    var lineheight = 15; // line height in 'px' 
    var maxheight = (maxlines * lineheight); 
    var allowedExtraLines = 3; 
    var showText = "Læs mere..."; 
    var hideText = "Skjul tekst..."; 

    $('.Truncate').each(function() { 
     var text = $(this); 
     if (text.height() > maxheight + allowedExtraLines * lineheight) { 
      text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' }); 

      var link = $('<a href="#">' + showText + '</a>'); 
      link.click(function (event) { 
       event.preventDefault(); 

       if (text.css('height') == 'auto') { 
        $(this).html(showText); 
        text.css('height', maxheight + 'px'); 
       } else { 
        //$(this).remove(); 
        $(this).html(hideText); 
        text.css('height', 'auto'); 
       } 
      }); 

      var linkDiv = $('<div></div>'); 
      linkDiv.append(link); 

      $(this).after(linkDiv); 
     } 
    }); 
});