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