检测 CSS 中的内容溢出

Question

我正在尝试创建一个链接，当内容超过某个阈值时，该链接将显示在 div 上，该阈值将隐藏其余内容，直到用户单击“阅读更多”链接，这将导致其余内容要显示的内容。我已经让它适用于长内容，但是当内容太短以至于不需要截断时，我无法弄清楚如何不显示它。看一下演示，看看我在说什么。我希望“阅读更多”链接不要出现在第二个 div 集群上。

$(function() {
  $("#toggle").click(function() {
    $("#content").toggleClass("truncated");
    $("#linkArea").hide();
  });

  $("#toggle2").click(function() {
    $("#content2").toggleClass("truncated");
    $("#linkArea2").hide();
  });
});

.truncated {
  max-height: 63px;
  overflow: hidden;
}
.content {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 125%;
  color: #3F4549;
  margin: 10px 0 10px 0;
  padding: 0;
  line-height: 21px;
  font-weight: 300;
}
.body {
  position: relative;
}
.body .read-more-fade {
  position: absolute;
  padding: 2px;
  bottom: 0; right: 75px;
  width: 50%;
  text-align: right;
  background-image: -webkit-gradient(linear,left,right,color-stop(0, rgba(255, 255, 255, 0)),color-stop(1, white));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white);
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), white);
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), white);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), white);
}
.body .read-more {
  position: absolute;
  padding: 2px;
  bottom: 0; right: 0;
  margin-bottom: 0;
  width: 90px;
  text-align: right;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <div id="content" class="content truncated">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="linkArea">
    <div class="read-more-fade">
      &nbsp;
    </div>
    <div class="read-more">
      <a id="toggle" href="#">&hellip;read more</a>
    </div>
  </div>
</div>

<div class="body">
  <div id="content2" class="content truncated">This content is too short to be truncated.</div>
  <div id="linkArea2">
    <div class="read-more-fade">
      &nbsp;
    </div>
    <div class="read-more">
      <a id="toggle2" href="#">&hellip;read more</a>
    </div>
  </div>
</div>

Answer 1

我要做的是检测段落的高度是否大于 5ems 然后显示它