JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div class="content"><span class="text">
  我是 james 我是文章 我是 james 我是文章 我是 james 我是文章 我   是 james 我是文章 我是 james 我是文章</span>
</div>

JavaScript

$(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")
      
    })
});