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 
Here is my site Read-Only: Webflow - Jussi Tarvainen