如何使用jQuery实现文本超5行显示展开按钮、不足5行隐藏对应功能

完整修改实现代码 #

CSS 部分

.content {
  height: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical; /* 补充缺失属性，确保多行截断生效 */
}
.content.show-all{
  height: auto;
  overflow: visible;
  text-overflow: unset; /* 修正原错误属性值 */
  -webkit-line-clamp: unset; /* 展开后取消行数限制 */
}
/* 内容不足5行时禁用点击 */
.content.no-click {
  pointer-events: none;
}
.more {
  text-align: center;
}
/* 内容不足5行时隐藏按钮 */
.more.hide {
  display: none;
}
.show{
  text-decoration: none;
  color: #222;
  transform:rotate(0deg);
  display: inline-block; /* 确保transform旋转生效 */
}
.rotate{
  transform: rotate(180deg); /* 建议改成180度更符合上下展开的交互习惯，可自行调整 */
}

JS 部分

// 页面DOM加载完成后执行
$(function() {
  // 遍历所有文章块做初始化判断
  $('.demo').each(function() {
    const $content = $(this).find('.content')
    const $moreWrap = $(this).find('.more')
    // 对比内容实际高度和容器显示高度，判断是否溢出5行
    const contentIsOverflow = $content[0].scrollHeight > $content[0].clientHeight
    if (!contentIsOverflow) {
      // 内容不足5行：隐藏下拉按钮，禁用内容区域点击
      $moreWrap.addClass('hide')
      $content.addClass('no-click')
    }
  })

  // 下拉按钮点击事件
  $('.show').click(function() {
    // 找到当前按钮所属的文章块，避免影响其他文章
    const $currentDemo = $(this).closest('.demo')
    $(this).toggleClass('rotate')
    $currentDemo.find('.content').toggleClass('show-all')
  })

  // 内容区域点击事件，仅绑定给允许点击的内容块
  $('.content:not(.no-click)').click(function() {
    const $currentDemo = $(this).closest('.demo')
    $(this).toggleClass('show-all')
    $currentDemo.find('.show').toggleClass('rotate')
  })
})

HTML 部分（支持多文章，复制demo块即可新增文章）

<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 
  </p>
  <div class="more">
    <a href="javascript:;" class="show">V</a>
  </div>
</div>

<!-- 第二篇短文章，测试自动隐藏按钮效果 -->
<div class="demo">
  <p class="content">
    这是一段不足5行的短文本，用来测试效果。
  </p>
  <div class="more">
    <a href="javascript:;" class="show">V</a>
  </div>
</div>

核心实现说明 #

• 高度判断逻辑：用DOM原生的scrollHeight（内容实际总高度）和clientHeight（容器设定的5行可视高度）做对比，自动识别内容是否超出5行
• 多文章独立控制：通过closest()方法定位当前操作所属的文章父容器，仅操作当前容器内的元素，不会影响页面上其他文章
• 无溢出状态处理：通过CSS类直接控制按钮显示隐藏和内容点击权限，不需要动态绑定/解绑事件，逻辑更简单稳定

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