Javascript 如何仅显示 div 的第一行文本并在单击时展开？

How do you show just the first line of text of a div and expand on click?

提问by dan

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.

有没有一种简单的方法可以通过 css + javascript 做到这一点？我使用 jQuery。

采纳答案by thirtydot

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

假设您不想使用任何 JavaScript 库（这很奇怪）。

See:http://jsfiddle.net/JUtcX/

见：http : //jsfiddle.net/JUtcX/

HTML:

HTML：

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

CSS:

CSS：

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

JavaScript:

JavaScript：

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

---

---

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

或者，如果您想使用 JavaScript 框架（例如jQuery ），您可以为其设置动画。

See:http://jsfiddle.net/JUtcX/2/

见：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);
});

回答by aroth

This is easily done using CSS + JavaScript. You just need to set the height of the div to the height of a single line, and hide all overflow. Then when the user clicks on the div, use a nice animation handler to perform a blind-down or other similar effect to show the full contents of the div.

这可以使用 CSS + JavaScript 轻松完成。你只需要将div的高度设置为单行的高度，并隐藏所有溢出。然后当用户点击 div 时，使用一个漂亮的动画处理程序来执行一个盲注或其他类似的效果来显示 div 的全部内容。

Here is a very basic example (no animation): http://jsfiddle.net/9Lw6T/

这是一个非常基本的示例（无动画）：http: //jsfiddle.net/9Lw6T/

回答by Qwertiy

$(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>

回答by FishBasketGordo

This will be sufficient:

这将足够：

To hide all but the first line:

要隐藏除第一行之外的所有内容：

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

To show all the text:

要显示所有文本：

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

Or, if you were to use jQuery:

或者，如果您要使用 jQuery：

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

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

回答by avetarman

Setting the hide of the div to 1em and then exapnd it onclick is the solution.

将 div 的隐藏设置为 1em 然后在单击时扩展它是解决方案。

Check this. I haven't used any JS library.

检查这个。我没有使用任何 JS 库。

CSS

CSS

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

HTML

HTML

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

JS

JS

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

Here is the fiddle

这是小提琴

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

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

回答by Chris Hasiński

In CSS set the size of the div to size of the line (important: you might need to use line spacing attribute to get proper padding on the bottom with second line).

在 CSS 中，将 div 的大小设置为行的大小（重要的是：您可能需要使用行间距属性来在第二行的底部获得适当的填充）。

I don't know about clicking, but you can use :hoverin CSS to change the style (reset line spacing, reset div size and overflow to proper values) to get on hover-show effect.

我不知道点击，但您可以:hover在 CSS 中使用更改样式（重置行距、重置 div 大小和溢出到正确的值）以获得悬停显示效果。

Or you can use JavaScript and change that CSS on click (easy to do with jQuery).

或者您可以使用 JavaScript 并在单击时更改该 CSS（使用 jQuery 很容易做到）。

回答by Quasdunk

Posting my comment as an answer:

发表我的评论作为答案：

Another approach could be, defining the class height: 1em; overflow-y: hidden;and then adding/removing it on click with javascript.

另一种方法可能是，定义类height: 1em; overflow-y: hidden;，然后在单击时使用 javascript 添加/删除它。

Or maybe you could also handle it in the :active-pseudo-class by wrapping your <div>with an <a>-tag, so no javascript would be needed. But then the div would collapse again on losing focus.

或者你也可以在:active-pseudo-class 中<div>使用<a>-tag来处理它，这样就不需要 javascript 了。但是随后 div 会在失去焦点时再次崩溃。

回答by Itay Moav -Malimovka

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

this can be optimized and can be made to use one of the common libs

这可以优化，可以使用公共库之一

回答by Jason Gennaro

You could do this with some jQuery.

你可以用一些 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>

script

脚本

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

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

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

http://jsfiddle.net/jasonennaro/dC32A/