Limiting characters to a fixed size in javascript

Question

In the below code

 var panel= '<div id="title" style="display:inline;font-size:150%;color:white;background:transparent;text-transform: none;width:150px;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
 <div name="images" id="name" style="display:inline;position: absolute; margin-left: auto;margin-right:auto;left: 0;right: 0;width:350px;height: 100px;"><img src="1"><img src="2"><img src="3"><img src="4"></div>
 <div id="name"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>

How to truncate the id fields title and name and show only 10 characters and next two characters must be .. if at all there is any character/

Thanks.

Answer 1

You can do something like this using .text():

$(document).ready(function(){
  $("#title, #name").text(function(i, t) {
    return (t.length >= 12) ? t.substring(0, 10) + '..' : t;
  })
});

I'd check if it's 12 or more characters because you're adding 2.

Otherwise this: 12345678901 renders as 1234567890.. which is longer than what was there to begin with.