如果文本溢出，如何切换显示更多按钮

Question

如果内容从容器溢出，我正在尝试切换显示更多按钮，然后按钮应该是可见的，如果不是然后隐藏

这是我的代码

$(document).ready(function() {
var contentHeight = $('.content').height();
  if(contentHeight >= '100px') {
    $('#btn').show();
  } else {
    $('#btn').hide();
  }
});

Answer 1

也许你需要scrollHeight / overfllow-y:hidden

 //var contentHeight = $('.content').height(); var contentHeight = $('.content')[0].scrollHeight; console.log(contentHeight); if (contentHeight >= 100) { $('#btn').show(); } else { $('#btn').hide(); }

 .content { height: 50px; display: inline-block; border: 1px solid; background-color: #f5f5f5; padding: 15px; width: 300px; overflow-y:hidden; } #btn { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <br> <a id="btn" href="#">Read More</a>