How to truncate CMS collection item text?

Hi Wizards of Webflow. I’m in need of your magic. How can I truncate a CMS collection text to 100% div width with an ellipsis at the end? And how can I do it when there is a HR line underneath it without truncating the HR line?

I used a code from this forum kindly provided by @anclist but it truncates my HR line below the item and I can’t get the text to go to the end of the row.

<script>
document.addEventListener("DOMContentLoaded", () => {
  const maxCharacters = 100%, // whatever max charachter you like to display
    targets = document.getElementsByClassName("h2-journal");

  Array.from(targets).forEach((target) => {
    const text = target.textContent,
      truncate = text.substring(0, maxCharacters);
    target.textContent = `${truncate}...`;
  });
});
    </script>

Here’s what I need the front end to look like:

And here’s how it turns out with the code above:

I really appreciate your help dear Merlin :slight_smile:

Here is my site Read-Only: Webflow - Jussi Tarvainen

Still trying to figure this out. In case you have any tips I’m all ears :slight_smile:

@Jussi I use Clamp.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers for this.