Add Read More / Read Less to Elementor Text Editor

Quick answer: Elementor’s Text Editor has no built-in “read more” toggle. This adds one with a small script: put a class like rm-25 on any Text Editor and it shows the first 25 words with a Read More link, expanding on click. Change the number in the class to change the word count — no editing the code.

What it does

The script finds every element whose class starts with rm-, reads the number off that class, and trims the text to that many words, adding Read More / Read Less links. Because the limit comes from the class name, one script handles every truncated block on the site at whatever length you want — rm-10, rm-25, rm-200 — without touching the code again.

Set it up

1. Add a class like rm-25 to any Elementor Text Editor widget (Advanced → CSS Classes). The number is the visible word count.
2. Add the script below once, site-wide (see where, under the code).

The 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>

Where to add it

This is a script, so it goes in a footer/scripts area, not Additional CSS. The reliable no-fuss route is the free WPCode plugin (or your theme’s “footer scripts” box): add a new snippet, set it to run site-wide in the footer, and paste the whole block — the <style> and <script> together. It runs on DOMContentLoaded, so load order does not matter.

How to verify

On the front end, a Text Editor with rm-25 should show 25 words, a “…”, and a bold Read More. Clicking it reveals the rest and swaps to Read Less. If nothing truncates, check the class is on the widget and that the text is genuinely longer than the limit — the script leaves short text alone on purpose.

Notes and how to undo

• It counts words, split on spaces, and works on the plain text of the widget.
• To change a length, just edit the class number on that widget — no code change.
• To remove it entirely, delete the snippet. To remove it from one block, take the rm- class off that widget.