Jak wyświetlić tylko pierwszy wiersz tekstu elementu div i rozwinąć kliknięcie?

Question

Chcę pokazać tylko pierwszą linię bloku owiniętego tekstu, a następnie odsłonić cały blok po kliknięciu. Chciałbym też wiedzieć, jak przełączyć go z powrotem do kompaktowej wersji jednoliniowej za pomocą drugiego kliknięcia.

Czy istnieje prosty sposób, aby to zrobić za pomocą css + javascript? Używam jQuery.

Answer 1

Zakładając, że nie chcesz używać żadnej biblioteki JavaScript (która jest nieparzysta).

Patrz: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'; 
} 

---

Ewentualnie, jeśli chcesz użyć ramy JavaScript, takich jak jQuery, można go ożywić.

Patrz: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 
} 

ten może zostać zoptymalizowana i można wykorzystać jeden z najczęstszych bibliotekami

Answer 3

można zrobić to z pewnym 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> 

skrypt

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

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

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

Answer 4

to łatwo zrobić za pomocą CSS + JavaScript. Musisz tylko ustawić wysokość div na wysokość pojedynczej linii i ukryć wszystkie przepełnienia. Następnie, gdy użytkownik kliknie element div, użyj ładnego programu obsługi animacji, aby wykonać efekt ślepej próby lub inny podobny efekt, aby pokazać pełną zawartość elementu div.

Oto bardzo prosty przykład (bez animacji): http://jsfiddle.net/9Lw6T/

Answer 5

W CSS ustawić rozmiar div do wielkości linii (ważne: może być konieczne, aby korzystać z linii rozstaw atrybut do uzyskania odpowiedniego obicia na dół z drugą linią).

Nie wiem o kliknięciu, ale można użyć :hover w CSS, aby zmienić styl (zresetować odstępy między wierszami, przywrócić rozmiar div i przepełnienie do odpowiednich wartości), aby uzyskać efekt wyświetlania po najechaniu.

Lub możesz użyć JavaScript i zmienić ten CSS na kliknięcie (łatwe do zrobienia z jQuery).

Answer 6

zamieszczaniu mój komentarz jako odpowiedź:

Innym rozwiązaniem mogłoby być, definiując klasę height: 1em; overflow-y: hidden; a następnie dodawanie/usuwanie go na kliknięcie z JavaScript.

Albo można też obsługiwać go w -pseudo klasy :active owijając swoją <div> z <a> -tag, więc nie ma javascript byłaby potrzebna. Ale wtedy div znów upadłby, tracąc ostrość.

Answer 7

ta będzie wystarczająca:

Aby ukryć wszystkie oprócz pierwszej linii:

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

Aby pokazać cały tekst:

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

Lub, jeśli były w użyciu jQuery:

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

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

Answer 8

Ustawianie ukryć div do 1 em a następnie exapnd to onclick jest rozwiązaniem.

Sprawdź to. Nie korzystałem z żadnej biblioteki 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"; 
} 

Oto Fiddle

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>