使 DIV 可扩展

Question

我有一个 div，它包含一个动态填充的段落。有时一段是20行，有时是3行。

我想设置一个高度限制，如果 div 大于此高度（由于段落中有更多行），它将缩小到仅显示 3 行文本，然后有一个“查看更多”按钮根据请求展开和/或折叠 div 以显示段落中的其余行。

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>{{paragraph}}</p>
</div>

关于如何尽可能轻松地做到这一点有什么建议吗？

Answer 1

如果您想要正好 3 行，请注意，这意味着高度应该为3*line-height。然后你可以这样做：

超文本标记语言

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>...</p>
  <a>More</a>
</div>

CSS

p {
    line-height: 18px;
    height: 54px;
    overflow: hidden;
}

overflow: hidden将隐藏超出容器边界的内容。

jQuery

然后我们切换高度限制。

$('a').click(function() {
    var p = $('a').prev('p')
    var lineheight = parseInt(p.css('line-height'))
    if (parseInt(p.css('height')) == lineheight*3) {
       p.css('height','auto');
       $(this).text('Less')
    } else {
       p.css('height',lineheight*3+'px');
       $(this).text('More')
    }
});

请参阅演示。