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.


  • Staff Admin

    You might have better luck by just using CSS.

    0_1538160788669_f8a30552-3172-41ed-86c2-5ad4416bdc07-image.png

    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.


Log in to reply
 

Suggested Topics

  • 2
  • 12
  • 9
  • 15
  • 3
| |