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然后显示

检测CSS中的内容溢出

1 个答案: