Add “Read More / Read Less” functionality in Elementor Text Editor or any description based on word count

1. Add a class like rm-25 to any Elementor Text Editor. (You can use any number like rm-10, rm-200 and the number will control the number of words automatically taking from this class)
2. It shows only the first 25 words, with a Read More link.

Add this code in html widget of wp code:

<style>
  .read-more-link,
  .read-less-link {
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
  }
</style>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const elements = document.querySelectorAll("[class*='rm-']");
    elements.forEach((el) => {
      const match = Array.from(el.classList).find(c => c.startsWith('rm-'));
      if (!match) return;
      const limit = parseInt(match.replace('rm-', ''));
      const fullText = el.textContent.trim();
      const words = fullText.split(" ");
      if (words.length <= limit) return;
      const visibleText = words.slice(0, limit).join(" ");
      const hiddenText = words.slice(limit).join(" ");
      el.innerHTML = `
        <span class="short-text">${visibleText}</span><span class="dots">...</span>
        <span class="more-text" style="display:none;"> ${hiddenText}</span>
        <span class="read-more-link">Read More</span>
        <span class="read-less-link" style="display:none;">Read Less</span>
      `;
      const readMore = el.querySelector(".read-more-link");
      const readLess = el.querySelector(".read-less-link");
      const moreText = el.querySelector(".more-text");
      const dots = el.querySelector(".dots");
      readMore.addEventListener("click", function () {
        moreText.style.display = "inline";
        dots.style.display = "none";
        readMore.style.display = "none";
        readLess.style.display = "inline";
      });
      readLess.addEventListener("click", function () {
        moreText.style.display = "none";
        dots.style.display = "inline";
        readMore.style.display = "inline";
        readLess.style.display = "none";
      });
    });
  });
</script>