如何显示一个div的第一行文本，并单击扩展？ [英] How do you show just the first line of text of a div and expand on click?

问题描述

我想只显示一个包装文本块的第一行，然后点击显示整个块。另外，我想知道如何在第二次点击时将其切换回紧凑的单行版本。

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.

有一个简单的方法通过css + javascript？我使用jQuery。

Is there an easy way to do this through css + javascript? I use jQuery.

推荐答案

假设你不想使用任何JavaScript库em>）。

Assuming that you don't want to use any JavaScript library (which is odd).

查看： 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 ），您可以对其进行动画处理。

---

Alternatively, if you would like to use a JavaScript framework such as jQuery, you can animate it.

请参阅： 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);
});

这篇关于如何显示一个div的第一行文本，并单击扩展？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！