如果内容没有溢出，请不要显示更多按钮

In my school project i'm checking if the content inside div is overflown, if it's overflown then do nothing but if it's not overflown then don't show the Read more link/button.

在我的学校项目中,我正在检查div内的内容是否溢出,如果它溢出然后什么都不做,但如果它没有溢出则不显示Read more link / button。

Here's my code,

这是我的代码,

<div class="hideContent">{{ content }}</div>
<div><a class="showLink" href="#">Read more</a></div>

EDIT:

Both of these divs are inside a for loop so Content & Read more is showing multiple times on page.

这两个div都在for循环中,因此Content&Read more在页面上多次显示。

Here's the css,

这是css,

.hideContent{
    max-height: 200px;
    overflow: hidden;
}

Here's how I'm checking if the Content is Overflown.

这是我如何检查内容是否溢出。

var getElements = document.querySelectorAll('.hideContent');

Array.from(getElements).forEach(function(element) {
  if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
    // Do Nothing
  } else {

    If content is not overflown then hide the `Read more` Link!

  }
});

How can we hide the Read more link in case if the content is not overflowing? Thank You . . .

如果内容没有溢出,我们如何隐藏Read more链接?谢谢。。。

2 个解决方案

#1

I assume that you script code condition is working fine, so just add in else part:-

我假设您的脚本代码条件工作正常,所以只需添加其他部分: -

$(element).next().find(".showLink").hide();

Working snippet:-

$(document).ready(function(){
  var getElements = document.querySelectorAll('.hideContent');
  Array.from(getElements).forEach(function(element) {
    if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
      // Do Nothing
    } else {
      $(element).next().find(".showLink").hide();
    }
  });
});

.hideContent{
    max-height: 200px;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hideContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

<div><a class="showLink" href="#">Read more</a></div>

<div class="hideContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<div><a class="showLink" href="#">Read more</a></div>

#2

So far, your check is good.
When you do the inverse if-condition, you can discard the else-block.

到目前为止,你的支票很好。执行反if条件时,可以丢弃else块。

In vanilla JavaScript/DOM the hiding of an element can be done by setting the [element].hidden attribute to true.

在vanilla JavaScript / DOM中,可以通过将[element] .hidden属性设置为true来完成元素的隐藏。

The next (DOM-)Element can be get by [element].nextElementSibling

下一个(DOM-)元素可以通过[element] .nextElementSibling获取

var getElements = document.querySelectorAll('.hideContent');
Array.from(getElements).forEach(function(el) {
    if (el.offsetHeight >= el.scrollHeight && el.offsetWidth >= el.scrollWidth)
        el.nextElementSibling.hidden = true;
});

.hideContent{
    max-height: 200px;
    max-width: 200px;
    overflow: hidden;
}

<div class="hideContent" style="background:#bea;">this element don't have a "Read more"-Block</div>
<div><a class="showLink" href="#">Read more</a></div><br>
<div class="hideContent">
    <div style="background:#bada55; width:220px;">This element is to wide, so it shows the "Read more"-Block</div>
</div>
<div><a class="showLink" href="#">Read more</a></div>
<div class="hideContent">
    <div style="background:#bada55; height: 220px;">This element is to high</div>
</div>
<div><a class="showLink" href="#">Read more</a></div>

#1