Trim long titles js issue

[ckubs]

I want to use js to trim long titles in topic lists for a cleaner look on my forum.

First option gives me a .jquery() not defined error when I add the part to initialize the script on Appearance > custom javascript . The second solution is just this small piece of code from a tutorial that simply works.

var truncate = function (elem, limit, after) {

	// Make sure an element and number of items to truncate is provided
	if (!elem || !limit) return;

	// Get the inner content of the element
	var content = elem.textContent.trim();

	// Convert the content into an array of words
	// Remove any words above the limit
	content = content.split(' ').slice(0, limit);

	// Convert the array of words back into a string
	// If there's content to add after it, add it
	content = content.join(' ') + (after ? after : '');

	// Inject the content back into the DOM
	elem.textContent = content;

};
var elem = document.querySelector('.short');
truncate(elem, 10, '...');

The problem I have though is that post titles are visible at full lenght then trimmed. Sometimes not trimmed at all. I guess maybe that code needs to be loaded faster but I have no clue how to solve that.

Thank you for any help.

[baris]

You might have better luck by just using CSS.

I added these two css rules

[component="topic/header"] {
  white-space: nowrap;
  text-overflow: ellipsis;
}

[ckubs]

@baris Thank you. I'll try that and probably need to add a width in percent to the container. I'm using Material and doesn't have that.