JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<div class="row b-t padding_top_bottom_10">
  <div class="col-md-12 col-sm-12 col-xs-12 ">
    <div class="comment more font_size_14"> 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. 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>
</div>

CSS

.comment {
  width: 93%;
  margin: 0 auto;
}

a.morelink {
  outline: none;
  color: #5bc0de !important;
}

.morecontent span {
  display: none;
}

JavaScript

var showChar = 400;
  var ellipsestext = "...";
  var moretext = "Read More";
  var lesstext = "Read 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 class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">' + moretext + '</a></div></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;
  });