Question

我有<div> id #emailBody

#emailBody {
    width:100%;
    min-width:500px;
    float:left;
    margin-bottom:20px;
    max-height:90px;
    overflow:hidden;
}

现在这里面是来自收到的电子邮件，所以有些电子邮件会放在90px height内，但是当我收到长电子邮件时却没有。

所以我将overflow:hidden隐藏了多余的电子邮件，只显示了90px的价值。

我现在要做的是，如果电子邮件的长度超过90px height，要显示一个可以扩展高度以显示完整电子邮件的按钮，可能会删除max-height并替换与height:inherit。

我如何实现这一目标？因为overflow:hidden开启时我无法使用max-height。

请帮忙

Answer 1

编辑：我改进了CSS，使其更可靠。

没有JS，我不相信有一个完美的方法来做到这一点。这可能是最好的尝试方法：

HTML：

<div class="wrapper">
  <div class="email-content">Email Content</div>
  <div class="show-more"><a href="#">Show More</a></div>
</div>

CSS：

.wrapper {
  max-height: 90px;
  overflow: hidden;
  position: relative;
  border: 1px solid #000;
  // other styling
}

.show-more {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.show-more a {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 100%;
}

您需要调整max-height值，以使所有内容按预期排列。实际上，您可能希望使用em值，同时指定line-height。

使用此标记，在包装器的高度向下延伸足够远之前，show-more链接不会出现。如果将代码复制并粘贴到HTML文档中，则不会看到该链接。如果您将Email Content替换为Email Content<br>的多个副本，它将显示在框的底部。

这可确保在达到max-height时，链接显示在框底部。唯一的问题是，wrapper的高度可能不会在不同的块中增加，因此show-more链接可能会被部分切断。

如何隐藏和显示取决于div高度

1 个答案: