How to truncate CMS collection item text?

Design help Custom code
1

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:

Screenshot 2022-05-08 at 21.15.10
Screenshot 2022-05-08 at 21.15.101241×509 42.8 KB

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

Screenshot 2022-05-08 at 21.14.55
Screenshot 2022-05-08 at 21.14.551768×924 88 KB

I really appreciate your help dear Merlin :slight_smile:

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

2

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

3

@Jussi I use https://cdnjs.com/libraries/Clamp.js/0.5.1 for this.

4

Above implementation is good but you are missing one thing here.

To truncate a text you set a certain limit, like you’ve done setting maxCharacters = 28. That means any text longer than 28 characters will be truncated.

But as I checked your CMS items (Journal Posts) many of the titles are below 28 characters. So all titles will not have same length. And all the characters has to be longer than 28 characters to cover the full width.

5

And most important thing is that example screenshot you shared, is not using character limit to truncate those texts (you can count the characters). It is depended on the width of the element.

And great thing is that it can be done with just CSS, no need of JS here.

Apply below CSS to the text element’s class name and check.

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
6

@Jussi I don’t know but I feel I’m sure I’ve seen this post before. And I feel I’ve replied on this.

Had you posted this somewhere else? Like in FB?