如何顯示div的第一行文本並展開點擊？

Question

我想顯示包裝文本塊的第一行，然後點擊顯示整個塊。另外，我想知道如何在第二次點擊時將其切換回緊湊的單行版本。

有沒有一種簡單的方法來通過CSS + JavaScript來做到這一點？我使用jQuery。

Answer 1

假設您不想使用任何JavaScript庫（這是奇數）。

參見：http://jsfiddle.net/JUtcX/

HTML：

<div id="content"></div> 

CSS：

#content { 
    border: 1px solid red; 
    height: 1em; 
    padding: 2px; /* adjust to taste */ 
    overflow: hidden  
} 

的JavaScript：

document.getElementById("content").onclick = function() { 
    this.style.height = 'auto'; 
} 

---

另外，如果你想用一個JavaScript框架，如jQuery，你可以激活它。

參見：http://jsfiddle.net/JUtcX/2/

$('#content').click(function() { 
    var reducedHeight = $(this).height(); 
    $(this).css('height', 'auto'); 
    var fullHeight = $(this).height(); 
    $(this).height(reducedHeight); 

    $(this).animate({height: fullHeight}, 500); 
}); 

Answer 2

<div id='a' onclick='toggletext'>first line<br /></div> 

function toggletext(){ 
    var html= document.getElementById('a').innerHTML; 
    if(html=='first line<br />'){ 
     html = 'first line<br />next lines<br />next lines<br />'; 
    }else{ 
     html = 'first line<br />'; 
    } 
    document.getElementById('a').innerHTML = html 
} 

這可以優化，可向使用公共庫

Answer 3

你可以用一些jQuery的做到這一點的一個。

<div id="a"> 
    <span id="first">This is the first line (read more)</span> 
    <br /> 
    <span id="rest">This is the rest of the text</span> 
</div> 

腳本

$('#rest').hide(); 

$('#first').click(function(){ 
    $('#rest').show();   
}); 

http://jsfiddle.net/jasongennaro/dC32A/

Answer 4

這是很容易使用CSS + JavaScript的完成。你只需要將div的高度設置爲一行的高度，並隱藏所有溢出。然後，當用戶點擊div時，使用一個不錯的動畫處理程序來執行盲視或其他類似效果，以顯示div的全部內容。

這是一個非常簡單的例子（不包括動畫）：http://jsfiddle.net/9Lw6T/

Answer 5

在CSS設置div的大小到該行的大小（重要的是：你可能需要使用行間距屬性來獲得適當的填充底部與第二行）。

我不知道點擊的方法，但是您可以在CSS中使用:hover來改變樣式（重置行間距，重置div大小和溢出到適當的值）以獲得懸停顯示效果。

或者您可以使用JavaScript並在點擊時更改該CSS（易於使用jQuery）。

Answer 6

張貼作爲一個答案我的評論：

另一種方法可能是，定義的類height: 1em; overflow-y: hidden;，然後添加/上點擊使用JavaScript刪除。

或者，也許你也可以在:active -pseudo-class中通過將<div>換成<a>-標籤來處理它，所以不需要javascript。但是，由於失去焦點，該股將再次崩潰。

Answer 7

這將是足夠的：

要隱藏所有，但第一行：

var theDiv = document.getElementById('theDiv'); 
theDiv.style.overflowY = 'hidden'; 
theDiv.style.height = '1em'; 

要顯示所有文字：

var theDiv = document.getElementById('theDiv'); 
theDiv.style.overflowY = 'visible'; 
theDiv.style.height = 'auto'; 

或者，如果你使用jQuery：

$('#theDiv').css({ height: '1em', overflowY: 'hidden' }); 

$('#theDiv').css({ height: 'auto', overflowY: 'visible' }); 

Answer 8

設置div來1EM的皮，然後exapnd它的onclick是解決方案。

選中此項。我沒有使用任何JS庫。

CSS

.expandable{ 
    height:1.2em; 
    overflow:hidden; 
} 

HTML

<div class="expandable" onclick="expand(this)">Your text here</div> 

JS

window.expand = function(el) { 
    el.style.height = "auto"; 
} 

這裏是小提琴

http://jsfiddle.net/RwM8S/1/

Answer 9

$(document).on('click', '.collapsible', function() { 
 
    $(this).toggleClass('collapsed'); 
 
});

p { 
 
    cursor: pointer; 
 
} 
 

 
.collapsed { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click. 
 
Is there an easy way to do this through css + javascript? I use jQuery.</p> 
 
<p class="collapsible">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click. 
 
Is there an easy way to do this through css + javascript? I use jQuery.</p> 
 
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click. 
 
Is there an easy way to do this through css + javascript? I use jQuery.</p>