如何使用jquery限制最多出現兩行的文字，不管有多少文字，都需要在后面加一個按鈕

各位，我目前遇到一個問題，我不知道如何實作它！

現在我希望 p 標簽中的文章最多顯示兩行。不管有多少字，都需要在文末加上..show_more，

但我不知道該怎么辦。如何實作這個要求，所以想請教大家！

$(function(){
    let len = 70;
    $('p').each(function(){ 
        if($(this).html().trim().length >len){   
            var str=$(this).html().substring(0,len-1) "<button class='info-more'>...顯示更多</button>";
            $(this).html(str);
        } 
    });
});  

    .item{
      width: 250px;
      font-size: 15px;
      letter-spacing:1px;
      line-height: 1.5;
      margin-bottom: 8px;
      letter-spacing:0;
      overflow:hidden;
      text-overflow:clip;
      display:-webkit-box;
      -webkit-box-orient:vertical;  
      -webkit-line-clamp:2;
      margin-bottom: 60px;
  }

<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>

uj5u.com熱心網友回復：

希望它對你有用！！！

$(document).ready(function() {
            var showChar = 100;
            var ellipsestext = "...";
            var moretext = "More";
            var lesstext = "Less";
            $('.more').each(function() {
                var content = $(this).html();

                if(content.length > showChar) {

                    var c = content.substr(0, showChar);
                    var h = content.substr(showChar-1, content.length - showChar);

                    var html = c   '<span >'   ellipsestext  '&nbsp;</span><span ><span>'   h   '</span>&nbsp;&nbsp;<a href="" >'   moretext   '</a></span>';

                    $(this).html(html);
                }

            });

            $(".morelink").click(function(){
                if($(this).hasClass("less")) {
                    $(this).removeClass("less");
                    $(this).html(moretext);
                } else {
                    $(this).addClass("less");
                    $(this).html(lesstext);
                }
                $(this).parent().prev().toggle();
                $(this).prev().toggle();
                return false;
            });
        });

a {
            color: #0254EB
        }
        a:visited {
            color: #0254EB
        }
        a.morelink {
            text-decoration:none;
            outline: none;
        }
        .morecontent span {
            display: none;
        }
        .comment {
            width: 400px;
            background-color: #f0f0f0;
            margin: 10px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comment more">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vestibulum laoreet, nunc eget laoreet sagittis,
        quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
        Duis eget nisl orci. Aliquam mattis purus non mauris
        blandit id luctus felis convallis.
        Integer varius egestas vestibulum.
        Nullam a dolor arcu, ac tempor elit. Donec.
    </div>
    <div class="comment more">
        Duis nisl nibh, egestas at fermentum at, viverra et purus.
        Maecenas lobortis odio id sapien facilisis elementum.
        Curabitur et magna justo, et gravida augue.
        Sed tristique pellentesque arcu quis tempor.
    </div>
    <div class="comment more">
        consectetur adipiscing elit. Proin blandit
    </div>

標籤：javascript 查询 css

上一篇：如何使用javascript設定文章超過兩行時顯示更多按鈕？

下一篇：插入帶有點擊標簽文本的節點