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