max-lines 속성을 가진 jQuery 확장기

Question

나는 정말로 jQuery Expander plugin이 훌륭하다고 생각하지만 나의 필요를 충족시킬 수는 없다. 그것은 텍스트를 자르고 텍스트를 확장하는 텍스트 뒤에 "더 읽기"버튼을 넣습니다. 텍스트 길이가 지정된 값 이상일 때만 자릅니다. 그러나 텍스트는 어떤 경우 :

Some text: 




Blah blah 

텍스트가 많은 문자와 텍스트로 많은 공간을 사용하지만, 확장기 그것을 잘라하지 않습니다. 텍스트 길이와 최대 줄 모두를 제한 할 수 있도록 max lines 속성을 갖고 싶습니다. 플러그인 추천?

Answer 1

나는 fudgey의 링크에서 부분적으로 가져온이 jQuery를 구성했습니다. 안타깝게도 div의 높이를 .height()와 비교해야하기 때문에 em 대신 px를 사용합니다. 그것은 또한 기능에 그것을 만들기 위해 더 예뻐질 수 있지만 그것은 작동합니다 :)

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