divの内容を2行だけ表示する

Question

divのコンテンツを表示する際に問題があります。 私はdivで表示する必要があるコンテンツの10行をテキストで検討しています。 最初のdivは2行のコンテンツのみを表示し、&には1つのリンク "Read Complete"が表示されるように設計したいと思います。 &このリンクをクリックすると、コンテンツ全体が表示されます&リンクを「非表示」に変更する必要があります。 &もう一度[リンクを非表示にする]をクリックすると、再度2行のコンテンツしか表示されません。

私にこの問題を助けてください。

更新：コンテンツは、コンテンツの終わり@ 2行である場合、それはあなたがそれを制御するためにCSS line-heightとheightを使用することができます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> 

Javascriptを助けることを願っています：私は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

を示さなければなりません。ここjsfiddleの私の簡単なデモは、次のとおりです。 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：

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

私はここに例を作った：http://jsfiddle.net/c5sza/2/

をあなたは滑り止め効果などを使用して、もう少しポンピングできます。