1

There is a problem that has been bothering me, and I received a request! The more button needs to appear when the article has more than two lines. If the user's article has exactly two lines or no more than two lines, there is no need to add the more button!

I have searched for a lot of methods, but I have not found a suitable method to achieve this requirement. I have made an explanatory diagram and hope to get your help!

thanks.

$(function(){
    let len = 70;
    $('.demo').each(function(){ 
        if($(this).html().trim().length >len){   
            var str=$(this).html().substring(0,len-1)+"<button class='info-more'>...more</button>";
            $(this).html(str);
        } 
    });
});  
.content{
    width: 200px;
    font-size: 15px;
    line-height: 1.5;
    overflow:hidden;
    text-overflow:clip;
    display:-webkit-box;
    -webkit-box-orient:vertical;  
    -webkit-line-clamp:2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  我是 james 我是文章 我是 james 我是文章 我是 james 我是文章 我   是 james 我是文章 我是 james 我是文章
</div>

enter image description here

AWEI
  • 417
  • 3
  • 9
  • It is more elegant to toggle the existing more based on length `$(this).find(".more").toggle($(this).text().trim().length >len)` – mplungjan Dec 02 '21 at 15:08
  • ＠mplungian Sorry, because I am a beginner in programming! How should you change this paragraph? https://codepen.io/hong-wei/pen/VwMLbwg?editors=1010 – AWEI Dec 02 '21 at 15:12
  • Not trivial. I have coded the whole thing, I change to length 10 to show it working, You can change back to 70 when you have more text https://jsfiddle.net/mplungjan/zhnp3c17/ – mplungjan Dec 02 '21 at 15:44
  • Does this answer your question? [hide/show more/less if more than n lines](https://stackoverflow.com/questions/52317099/hide-show-more-less-div-if-more-than-n-lines-in-sibling-div) It has a slightly different scenario (sibling div) but should give you a starter based on the height of the div (lines, rather than characters) – freedomn-m Dec 02 '21 at 16:47

1 Answers1

1

You can do this with CSS Limit text length to n lines using CSS

BUT you asked for a JS version

https://jsfiddle.net/mplungjan/zhnp3c17/

$(function(){
    let len = 10;
    let $but = $('<button class="info-more" >...more</button>')
    $('.content').each(function(){ 
        const $textDiv = $(".text",this); // container
        let str = $textDiv.text().trim(); // string
        let diff = str.length - len;      // difference in length
        console.log(diff)
        if (diff > 0) {
          $textDiv.text(str.slice(0,len)) // slice if needed
          $(this)
            .append($('<span class="moreSpan" hidden/>').text(str.slice(len)))
            .append($but.clone());
        $(".info-more",this).toggle(diff>0); // show more if needed
      }  
    });
    $(".info-more").on("click",function() {
      const $moreSpan = $(this).closest("div").find(".moreSpan")
      $moreSpan.toggle()
      $(this).text($moreSpan.is(":visible")? "...less": "...more")
      
    })
});  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content"><span class="text">
  我是 james 我是文章 我是 james 我是文章 我是 james 我是文章 我   是 james 我是文章 我是 james 我是文章</span>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Hello~ Thank you for your response! But currently your code does not seem to solve my problem, because when the user performs a line break, the mor button is not visible. https://codepen.io/hong-wei/pen/OJxVgZv – AWEI Dec 02 '21 at 16:06
  • What line break - your code and description does not mention line break – mplungjan Dec 02 '21 at 16:11