Sometimes you would like to shorten your long text in the HTML table. Here is the way to go with css and jQuery: css:

<table>
  <tr>
    <td class="ellipsis">
      Some very long text that you would like to be shortened
    </td>
  </tr>
</table>

CSS:

td.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px
}

jQuery:

$('.ellipsis').each(function (index) {
    var $this = $(this);
    var titleVal = $this.text();
    if (titleVal != '') {
        $this.attr('title', $.trim(titleVal));
    }
});
  • Rob Dawson

    Thanks for the css.

    For my own use case I ended up setting the table to have a style table-layout: fixed, and dropped the max-width.

    • Perhaps that would be a slightly better implementation. Now I find my own approach slightly cludgy