Trim long titles js issue

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

  • You might have better luck by just using CSS.


    I added these two css rules

    [component="topic/header"] {
      white-space: nowrap;
      text-overflow: ellipsis;
  • @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.

Suggested Topics