如何使用jQuery实现文本超5行时动态隐藏内容并添加折叠按钮

实现方案 #

要实现文本不足5行时隐藏折叠按钮的效果，核心是页面初始化时判断文本实际高度是否超过5行高度，根据结果控制按钮显隐即可。 #

调整后的完整代码

CSS 代码

.content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  /* 固定行高保证高度计算准确，可根据需求调整 */
  line-height: 1.5;
}
.content.show-all{
  height: auto;
  overflow: visible;
  text-overflow: unset;
  /* 展开时取消行数限制 */
  -webkit-line-clamp: unset;
  transition: all 2s;
}
.more {
  text-align: center;
  transition: all .2s;
  /* 默认隐藏按钮，判断超过5行后再显示 */
  display: none;
}
.show{
  display: inline-block;
  text-decoration: none;
  color: #222;
  transition: all .6s;
  transform: rotate(0deg);
}
.rotate{
  transform: rotate(180deg)
}

JS 代码

$(function() {
  const $content = $('.content');
  const $moreBtn = $('.more');
  // 获取内容完整高度
  const originClamp = $content.css('-webkit-line-clamp');
  $content.css('-webkit-line-clamp', 'unset');
  const contentFullHeight = $content.height();
  $content.css('-webkit-line-clamp', originClamp);
  // 计算5行文本的高度
  const lineHeight = parseFloat($content.css('line-height'));
  const fiveLineHeight = lineHeight * 5;
  // 内容高度超过5行则显示折叠按钮
  if (contentFullHeight > fiveLineHeight) {
    $moreBtn.show();
  }

  // 原有折叠展开逻辑
  $('.show').click(function(){
    $(this).toggleClass('rotate'); 
    $('.content').toggleClass('show-all'); 
  });
  $('.content').click(function(){
    $('.show').toggleClass('rotate'); 
    $(this).toggleClass('show-all');
  })
})

HTML 代码（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt ugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  <div class="more">
    <a href="javaScript:;" class="show">V</a>
  </div>
</div>

注意事项

• 为.content设置固定行高是为了保证高度计算准确，可根据你的项目样式需求调整行高数值
• 若需要兼容非webkit内核浏览器，可将高度判断逻辑替换为对比scrollHeight和offsetHeight，无需依赖-webkit-line-clamp属性即可实现

内容的提问来源于stack exchange，提问作者AWEI