Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{ box-sizing: border-box;}
.category-description {
    max-width: 540px;
    background-color: #e3e3e3;
    border: #ccc 1px solid;
    color: #000;
    padding: 15px;
    margin: auto;
    font-size: 16px; 
    font-family:"Poppins"
}
.category-description p {
    font-size: 16px;
    line-height: 1.4;
}
.category-description h3 {
    font-size: 22px;
    margin:0 0 10px 0px;
}
/**Typeo CSS Start**/
.morecontent {
    display: inline;
}
.morecontent .contprt{
    display: none;
}
.moreellipses {
    display: initial;
}
.morelink {
    display: inline-block;
    color: #000;
    text-decoration: underline;
    cursor: pointer;
}
.morelink:hover {
    text-decoration: none;
}

document.addEventListener("DOMContentLoaded", function() {
  var showChar = 150;
  var ellipsestext = "...";
  var moretext = "Show more >";
  var lesstext = "< Show less";

  var categoryDescriptions = document.querySelectorAll('.category-description p');
  categoryDescriptions.forEach(function(description) {
    var content = description.innerHTML;
    if (content.length > showChar) {
      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);
      var html = c + '
' + ellipsestext + ' 
' + h + '  ' + moretext + '';
      description.innerHTML = html;
    }
  });

  var moreLinks = document.querySelectorAll('.morelink');
  moreLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      if (this.classList.contains("less")) {
        this.classList.remove("less");
        this.innerHTML = moretext;
      } else {
        this.classList.add("less");
        this.innerHTML = lesstext;
      }
      this.parentNode.previousElementSibling.style.display = "none";
      this.previousElementSibling.style.display = "inline";
      return false;
    });
  });
});