Js for long text trimming

Hello guys.

I have a card structure for my blogs. Most of their name and summary are pretty long and I want to limit their length.

I couldn’t find a default option to do that from the webflow panel so I tried using js for that.

I did it like this:

<script defer>
	document.addEventListener("DOMContentLoaded", function () {
		const headerElements = document.querySelectorAll(".header-overflow");
		const paragraphElements = document.querySelectorAll(".summary-overflow");

		headerElements.forEach(function (element) {
			const header = element.innerText.trim();
			if (header.length > 24) {
				element.innerText = header.slice(0, 24) + "...";
			}
		});

	
	});
</script>

I’m waiting until dom is loaded, then creating variables for header and paragraph elements, where the title and summary go. Their class names are correct, I double-checked.

If i do it like that it works but whenever I try to add the same forEach loop for the paragraph elements, the paragraph gets completely removed from the DOM and header looses it’s styling but js for header still works.

Even when I try it for only paragrapElements it still messes up the card same way.

What am I missing here?

Might be easier-

Use this to add the lib;