max-lines属性jQuery扩展器

Question

我真的认为jQuery Expander plugin是伟大的，但它不能满足我的需求。它剪切文本并在扩展文本的文本后面放置一个“多读”按钮。但只有当文本长度超过指定值时才会切断。但是，如果文本是什么：

Some text: 




Blah blah 

的文本中使用尽可能多的空间与许多字符的文本，但扩展将不会削减它关闭。我想要一个最大线条属性，所以我可以限制文本长度和最大线条。任何插件建议？

Answer 1

我已经构建了这个jQuery，部分取自fudgey的链接。不幸的是，它使用px而不是em，因为我需要将div的高度与.height（）进行比较。它也可以更漂亮，使其成为一个功能，但它的工作:)

$(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); 
     } 
    }); 
});