How to use jquery to limit the text appearing on two lines at most, and no matter how many texts, yo-CodePudding

everyone, I am currently experiencing a problem and I don’t know how to implement it!

Now I hope that the article in the p tag will display at most two lines. No matter how many words there are, you need to add ..show_more at the end of the article,

but I don’t know what to do. How to achieve this requirement, so I want to ask for your help!

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

CodePudding user response：

Hope it's work for you !!!

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