Javascript Don'；如果内容未溢出，则不显示“阅读更多”按钮

在我的学校项目中，我正在检查

div

中的内容是否溢出，如果溢出，则不执行任何操作，但如果未溢出，则不显示

阅读更多

链接/按钮

这是我的密码

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

下面是我检查内容是否溢出的方法

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!

  }
});

var getElements=document.querySelectorAll（'.hideContent'）；
数组.from（getElements）.forEach（函数（元素）{
if（（element.offsetHeight

---

如果内容没有溢出，我们如何隐藏

阅读更多

链接？谢谢你

我假设您编写的脚本代码条件工作正常，所以只需添加

else

部分：-

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

工作片段：-

$（文档）.ready（函数（）{
var getElements=document.querySelectorAll（'.hideContent'）；
数组.from（getElements）.forEach（函数（元素）{
if（（element.offsetHeight
.hideContent{
最大高度：200px；
溢出：隐藏；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
到目前为止，您的支票还不错。

执行“反转if”条件时，可以放弃else块

在普通JavaScript/DOM中，可以通过将[element].hidden属性设置为true来隐藏元素

下一个（DOM-）元素可以通过[Element].nextElementSibling获得


var getElements=document.querySelectorAll（'.hideContent'）；
数组.from（getElements）.forEach（函数（el）{
如果（el.offsetHeight>=el.scrollHeight&&el.offsetWidth>=el.scrollWidth）
el.nextElementSibling.hidden=true；
});
.hideContent{
最大高度：200px；
最大宽度：200px；
溢出：隐藏；
}
此元素没有“读取更多”块


此元素太宽，因此显示“读取更多”块
这个元素太高了
您是否有多个内容div以及相应的阅读更多链接？@AlivetoDie先生，它在for循环中。因此，内容随着
readmore
link“我们如何隐藏链接”-
$（element.next（）.find（“.showLink”）.hide（）一起显示了多次-我遗漏了什么？@freedomn-m谢谢你，先生。它工作得非常好：）谢谢先生：）
$（元素）.next（）.find（“.showLink”）.hide（）工作得非常好：）
$(element).next().find(".showLink").hide();