Question

看看脚本：

document.querySelector('#b1').addEventListener('click', function() {
  document.querySelector('#c1').style.height = 'auto';
  this.style.display = 'none';
});

document.querySelector('#b2').addEventListener('click', function() {
  document.querySelector('#c2').style.height = 'auto';
  this.style.display = 'none';
});

body {
  font: 14px verdana;
}

#c1 {
  overflow: hidden;
  height: 5.6em;
  line-height: 1.2em;
  width: 100%;
}

#c2 {
  overflow: hidden;
  height: 5.6em;
  line-height: 1.2em;
  width: 100%;
}

<div id="c1">
  This is small para
</div>
<button id="b1">Read more</button>
<br /><br />
<div id="c2">
  There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large. There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large. There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large. There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large.
</div>
<button id="b2">Read more</button>

对于第一段 #c1 ，不需要 阅读更多 ，因此如何隐藏它没用...？

更新1

我无法没有控制文本长度。

之前，height和width分别设置为 2.6em 和 200px ，因此我得到了解决方案：

您可以遍历每个div并检查其文本内容。如果是   小于一定长度，您可以隐藏其下一个元素，即   按钮。在下面的代码中，您可以将 100 调整为所需的任何值。

通过Hari Das， Solution DEMO

为什么Hari的解决方案与我的问题不符？

我没有优先考虑characters的数量，我优先考虑了div的高度。

为什么我偏爱div的高度？

如果我赞成Hari的解决方案：

假设每行上只有 3 个字母，直到 15 行，即div's 高度为长，并且字符长度为小于小于 100 ，因此这里是Hari的解决方案不会折叠该段落，并且不会显示任何按钮...

Answer 1

您可以遍历每个div并检查其scrollHeight。如果它小于可见高度，则可以隐藏其下一个元素，即按钮。

document.querySelector('#b1').addEventListener('click', function() {
  document.querySelector('#c1').style.height = 'auto';
  this.style.display = 'none';
});

document.querySelector('#b2').addEventListener('click', function() {
  document.querySelector('#c2').style.height = 'auto';
  this.style.display = 'none';
});

$(document).ready(function(){
  $( "div" ).each(function( index ) {
    if($(this)[0].scrollHeight <= $(this)[0].offsetHeight){
      $(this).next().hide();
    }
  });
});

body {
  font: 14px verdana;
}

#c1 {
  overflow: hidden;
  height: 2.6em;
  line-height: 1.2em;
  width: 200px;
}

#c2 {
  overflow: hidden;
  height: 2.6em;
  line-height: 1.2em;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="c1">
  This is small para
</div>
<button id="b1">Read more</button>
<br /><br />
<div id="c2">
  There's lot of text in this para. So the para is being very large. Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large. There's lot of text in this para. So the para is being very large.
  Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large.
</div>
<button id="b2">Read more</button>

Answer 2

更新-修复了maxHeight问题 将此Javascript代码放在此处的JSFiddle中。

document.querySelector('#b1').addEventListener('click', function() {
  $('#c1').css('height', 'auto').css('overflowY', 'auto');
  this.style.display = 'none';
});

document.querySelector('#b2').addEventListener('click', function() {
  $('#c2').css('height', 'auto').css('overflowY', 'auto');
  this.style.display = 'none';
});

$(document).ready(function(){
  $( "div" ).each(function( index ) {
    if(parseFloat($(this).css('height')) < '2.6em'){ //change 150 to your desired height
      //if height is less than desired, leave it unchanged and hide the button
      $(this).next().hide();
    }
    else {
      //if height is more than desired,
      //set height to desired, hide the overflowing text
      $(this).css('height', '2.6em').css('overflowY', 'hidden');
      //and show the "Read More" button
      $(this).next().show();
    }
  });
});

原始答案：

由于表示要点，我无法评论@HariDas的答案，所以我要添加答案。

如果要使其按照div的height而不是length of text的方式工作，只需从@HariDas的答案中替换这部分：

$(document).ready(function(){
  $( "div" ).each(function( index ) {
    if($(this).text().length < 100){
      $(this).next().hide();
    }
  });
});

与此：

$(document).ready(function(){
  $( "div" ).each(function( index ) {
    if(parseFloat($(this).css('height')) < 150){ //change 150 to your desired height
      //if height is less than desired, leave it unchanged and hide the button
      $(this).next().hide();
    }
    else {
      //if height is more than desired,
      //set height to desired, hide the overflowing text
      $(this).css('maxHeight', '150px').css('overflowY', 'hidden');
      //and show the "Read More" button
      $(this).next().show();
    }
  });
});

HTML中的“阅读更多”按钮自动隐藏/显示

2 个答案: