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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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

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

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

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

另外，如果您想使用jQuery之类的JavaScript框架，则可以对其进行动画处理。

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

以上是 如何仅显示div的第一行文本并在单击时展开？ 的全部内容， 来源链接： utcz.com/qa/413303.html

回到顶部