How can I truncate long texts in a table using CSS?

Question

Can anyone give a CSS example of how can I create a table where long texts are truncated to texts ending with \"...\"?

Here is the example: http://jsfiddle.net/NpABe

Answer 1

If you need truncate text for just one line use this css:

.truncate-text-one-line{
    width:80%;
    height: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Otherwise, use this script:

function shorten_text(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    document.write(ret);
}

Answer 2

Use text-overflow: ellipsis. You will need to fix the width of the cells and prevent line wrapping:

td {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

EDIT: actually this won't work. It seems you need a container div to apply the styles to:

<table>
  <tr>
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div</td>
(snip)

And then:

 td div {
   width: 100px;
   white-space: nowrap;
   overflow: hidden;         
   text-overflow: ellipsis;
 }

EDIT 2 Ah there is a way, but only if you use table-layout: fixed:

table {
  table-layout: fixed;
  width: 100px;
}

td {
  white-space: nowrap;
  overflow: hidden;         /* <- this does seem to be required */
  text-overflow: ellipsis;
}

Answer 3

This is a variation on the answer from @RobAgar that works well for me. I define the following CSS:

td.item-node {
   max-width: 10em;
}
div.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

And the HTML looks like

<td class="item-note">
   <div class="ellipsis">Really super duper long item note that will truncate</div>
</td>

This way I can specify the width on the thing I care about (the table cell) without having to repeat all the white-space, overflow CSS properties for each cell. The class on the div also makes it clear what its purpose is.

Answer 4

2020 update - Full CSS working version

For me the proposed answer wasn't doing the trick...

After some research, the only way to do it without specifying a minimum width is the following:

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

With this method, you don't have to add an other div.

The html structure should look like something like this:

<tr>
  <td class="clamp">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </td>
</tr>

Also here is the can i use, https://caniuse.com/#search=line-clamp, it's supported by all of them (beside iE as usual)... For iE you can just specify a max-height and overflow-y:hidden it should do the trick.

And here is a simple working example, https://jsfiddle.net/d8r4yckm/ (loaded bootstrap for "ease on the eyes" only)