javascript - 检测 CSS 中的内容溢出

Question

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