CODEWITHSUNDEEP
javascriptjquerycss
Martin Sowning
Martin Sowning

Reputation: 393

Cut text in table

<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

Upvotes: 1

Views: 2656

Answers (5)

hunter
hunter

Reputation: 63542

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/

Upvotes: 3

yunzen
yunzen

Reputation: 33439

There is also a jQuery plugin that allows to have this multiline
http://plugins.jquery.com/plugin-tags/ellipsis

Upvotes: 1

arb
arb

Reputation: 7863

You could try adding the text-overflow property to your first CSS class.

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

Some documentation about text-overflow can be found here.

Upvotes: 2

Saeed Neamati
Saeed Neamati

Reputation: 35842

Why don't you use overflow: hidden; for this?

Upvotes: 1

DaveRandom
DaveRandom

Reputation: 88697

This (text-overflow: ellipsis; white-space: nowrap; overflow: hidden;) should sort you out, I think...

Upvotes: 2

Related Questions