如何使用jQuery实现p标签文本最多显示2行且末尾追加显示更多按钮

现有代码问题 #

• 固定字符长度截断逻辑不准确：不同字符（中英文、符号）宽度差异大，无法精准匹配2行实际可容纳的内容量
• CSS截断与JS截断逻辑冲突：同时开启-webkit-line-clamp和JS固定长度截断，会导致内容显示异常
• 未适配短文本场景：不足2行的内容也可能被误加多余的后缀

完整可运行代码 #

CSS部分 #

.item{
  width: 250px;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 60px;
  overflow:hidden;
}
.item p {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-more {
  background: none;
  border: none;
  color: #1677ff;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
/* 展开状态样式，不需要展开功能可删除 */
.item.expand p {
  -webkit-line-clamp: unset;
}

JS部分 #

$(function(){
    // 存储每个p标签的原始完整内容
    $('p').each(function(){ 
        $(this).data('originText', $(this).text());
        // 通过高度判断内容是否溢出2行
        const isOverflow = this.scrollHeight > this.offsetHeight;
        if(isOverflow) {
            $(this).closest('.item').append('<button class="info-more">...显示更多</button>');
        }
    });
    // 点击展开/收起逻辑，不需要可删除
    $(document).on('click', '.info-more', function() {
        const $item = $(this).closest('.item');
        $item.toggleClass('expand');
        $(this).text($item.hasClass('expand') ? '收起' : '...显示更多');
    })
});  

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit incidunt sit accusamus nisi veritatis consequatur, pariatur a voluptates esse nostrum omnis rerum veniam, ipsam laborum dignissimos placeat recusandae neque facere sed quis similique. Sint harum hic, laboriosam molestiae, fuga beatae, velit dolorum aperiam repellendus ipsum sapiente vel voluptate eos. Adipisci animi ab provident id cumque, omnis totam accusamus aperiam minus iste consectetur vero corrupti repellat at. Harum architecto incidunt dolores impedit cupiditate aliquam consectetur, itaque voluptas aspernatur facere consequuntur a quisquam qui vero quia quaerat libero. Animi voluptates sunt incidunt, nisi laboriosam commodi accusantium explicabo itaque rem ullam cum at.</p>
  </li>
  <li  class="item">
      <p>Lorem ipsum dolor sit amet consectetur.</p>
  </li>
  <li  class="item">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam velit soluta praesentium. Tempore praesentium eaque omnis ab vitae deleniti consequuntur vel, suscipit, aut repellendus rerum repudiandae, est neque in beatae? Velit hic quam nulla rem quos nobis id neque nihil consectetur voluptas exercitationem iusto, suscipit molestiae explicabo veniam perferendis possimus doloremque labore laborum eaque repellendus saepe dicta expedita! Aut totam deserunt fuga iste ad deleniti aspernatur id nostrum voluptatum dolores.trum voluptatum dolores.</p>
  </li>
</ul>

优化说明 #

• 采用高度判断溢出逻辑，适配不同字符、容器宽度场景，判断精度更高
• 仅超出2行的内容会追加显示更多按钮，短文本无多余后缀
• 保留原始完整内容，可支持后续展开、编辑等操作
• 兼容webkit内核浏览器，符合现有代码的技术栈

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