How To Remove Text That Is Overflown From Element In Jquery

So I am working on a web app, and this is my layout. The divs use overflow: hidden; text-overflow: ellipsis; white-space: nowrap; This visually is fine, and is also fine in a JSFi

Solution 1:

The issue is that not all letters take up the same amount of space as each other. For instance I and M where M (guessing) is ~ 3x as big as I. See this explanation.

However, you can guess and get close but there's still no guarantee.

$('.Name').each(function() {

  let text = $(this).text();
  let width = $(this).parent('.Box').outerWidth();
  let fontSize = 18 - ( 18 * 0.35 ); // Hardcoded from CSSlet count = width/fontSize;
  text = text.substr(0, count);  
  $(this).text(text);

});

This fiddle is a working example of the above and uses the font-size in the CSS and removes ~ 35% to allow for more characters but depending on the actual letters uses the results may vary widely.

You could use a fixed width font as all the characters should take up the same amount of space. However, results still aren't going to be perfect.

Your best bet is the limit the character count when the name is created instead of having to go back and try and parse it after the fact.

Solution 2:

For anyone that comes to this post, max-width: 40ch; worked best for me.