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

【问题标题】：How to toggle show more button if text overflow如果文本溢出，如何切换显示更多按钮
【发布时间】：2021-05-29 02:55:27
【问题描述】：

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

这是我的code

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

【问题讨论】：

标签： javascript jquery user-interface frontend

【解决方案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>

【讨论】：