두 줄까지만 div 내용 표시

Question

div에 내용이 표시되는 데 문제가 있습니다. 일부 텍스트는 div에 표시해야하는 내용의 10 줄을 고려해야합니다. 처음에는 div에 2 줄의 내용 만 표시하고, &에는 하나의 링크 "읽기 완료"가 표시되도록 디자인하고 싶습니다. & 링크를 클릭하면 전체 내용이 표시되어야합니다. & 링크를 "숨기기"로 변경해야합니다. & 다시 숨기기 링크를 클릭하면 2 줄의 내용 만 다시 표시해야합니다.

제발 도와주세요.

업데이트 : 콘텐츠 콘텐츠의 끝 @ 두 라인의 경우는 3 점 (...)

Answer 1

나는이 당신에게

<div id="mydiv"> 
Please read the documentation. 
For updates please follow our blog, tweets or become a fan. 
    <span><a href="#" id="more" onclick="full_view(this.id)">more</a></span> 
<span style="display:none;" id="disMore"><p>Please read the documentation.  
For updates please follow our blog, tweets or become a fan.Please read the documentation. 
For updates please follow our blog, tweets or become a fan.Please read the documentation. 
For updates please follow our blog, tweets or become a fan.</p></span> 
<span><a href="#" id="hide" onclick="half_view(this.id)" style="display:none;">hide</a></span> 
</div> 

자바 스크립트가 도움이되기를 바랍니다 : 나는 DIV 높이 증가 감소 노력했다

function full_view(e) { 
document.getElementById('disMore').style.display = "block"; 
document.getElementById('more').style.display = "none"; 
document.getElementById('hide').style.display = "block"; 
} 
function half_view(e) { 
document.getElementById('disMore').style.display = "none"; 
document.getElementById('more').style.display = "block"; 
document.getElementById('hide').style.display = "none"; 
} 

Answer 2

당신은 그것을 제어하는 ​​CSS line-height 및 height을 사용할 수를 표시해야합니다. http://jsfiddle.net/7xv6J/

Answer 3

당신은 이런 식으로 작업을 수행 할 수 있습니다 :

<div id="text"> 
    Your content... 
</div> 

<a href="#" id="readall">Read all</a> 

$(document).ready(function() { 
    //Change this variable to show more or less lines: 
    var nrOfLines = 2; 
    var height = 0; 

    //Get line height 
    height = $('div#text').css('line-height'); 
    height = height.substring(0, height.search('px')); 
    height = (height * nrOfLines) + 'px'; 
    //Set div to only show 2 lines 
    $('div#text').css({'height' : height}); 

    setTriggers(); 

    function setTriggers() { 
     $('a#readall').click(function() { 
      $(this).attr('id', 'hide'); 
      $(this).html('Hide'); 
      $('div#text').css({'height' : 'auto', 
           'overflow' : 'auto'}); 
      setTriggers(); 
     }); 

     $('a#hide').click(function() { 
      $(this).attr('id', 'readall'); 
      $(this).html('Read all'); 
      $('div#text').css({'height' : height, 
           'overflow' : 'hidden'}); 
      setTriggers(); 
     }); 
    } 

}); 

그리고 당신의 CSS : http://jsfiddle.net/c5sza/2/

:

div#text { 
    border: 1px solid black; 
    width: 250px; 
    overflow: hidden; 
} 

를 내가 여기 예를 만들어 여기 jsfiddle 내 간단한 데모입니다 슬라이딩 효과 등을 사용하여 더 포주 수 있습니다.