Question

<table id="tab">
    <tr><td class="sub">mmmmm</td><td class="sub">jjjjj</td></tr>
    <tr><td class="sub">lllll</td><td class="sub">wwwww</td></tr>
</table>

#tab td {
  border: 1px solid green;
  max-width: 40px;
}

$(".sub").each(function(){
    var o = $(this).html();
    $(this).html(o.substring(0, 2))
})

LIVE EXAMPLE: https://jsfiddle.net/UTYLf/1/

i would like max-width for TD – 40px. i would like cut overflow text. I made substring but this is not usefriendly.
mm != ll and jj != ww etc. mm and ll has 2 chars, but mm takes more space than a ll.
In my example i would like have in table same as in this example: https://jsfiddle.net/Eb6WN/

what I must use instead of substr()?
I can use HTML, CSS, JavaScript (jQuery) and PHP

Answer 1

In these types of situations I use overflow: hidden as well as adding a title for each cell to display the complete text:

#tab td {
    border: 1px solid green;
    max-width: 40px;
    overflow: hidden;
}

$(".sub").each(function(){
    $(this).attr("title", $(this).text()).css("cursor", "help");
})

https://jsfiddle.net/hunter/UTYLf/4/