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/

<table>
    <tr>
        <td>aaaa</td>
        <td>ssssssss</td>
        <td>dddddddddddd</td>
    </tr>
    <tr>
        <td>ffffffffffffffff</td>
        <td>gggggggggggggggggggg</td>
        <td>hhhhhhhhhhhhhhhhhhhhhhhh</td>
    </tr>
    <tr>
        <td>jjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
        <td>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
        <td>llllllllllllllllllllllllllllllllllll</td>
    </tr>
</table>

Does this answer your question? [How can I truncate table cells, but fit as much as content possible?](https://stackoverflow.com/questions/5239758/how-can-i-truncate-table-cells-but-fit-as-much-as-content-possible) — vsync, Dec 22 '21 at 07:23

Rob Agar · Accepted Answer · 2012-01-11T12:08:32.030

54

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;
}

edited Jan 11 '12 at 12:08

answered Jan 11 '12 at 11:35

Rob Agar

12,337
5
48
63

2

`overflow` won't work here as `td` elements are `display: table-cell` by default. – Rory McCrossan Jan 11 '12 at 11:36
@Rory, yep you're quite right. In fact it doesn't work at all. Could have sworn I'd done this before, but it seems to be impossible without an extra div :( – Rob Agar Jan 11 '12 at 11:50

amarinediary · Answer 2 · 2021-05-15T01:59:48.123

2021 UPDATE - PURE CSS WORKING VERSION

The accepted answer wasn't doing the trick for me...

The ONLY way to do it without specifying a min-width is achieved by using line-clamp.

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

As IE is (Finally) dying-off, and being replaced by Edge, support is now (nearly) global at 96-ish %.

IE support can be achieved by specifying a max-height based on line-height and overflow-y: hidden.

Example

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

<table>
  <thead>
    <tr>
      <th scope="col">Title</th>
      <th scope="col">Context</th>
      <th scope="col">Date</th>
    </tr>
  </thead>
  <tbody>

  <tr>
    <th scope="row">French Revolution</th>
    <td class="clamp clamp-3"><span style="color:red;">Clamp 3 lines</span> 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </td>
    <td>1789</td>
  </tr>

  <tr>
    <th scope="row">First Republic</th>
    <td class="clamp clamp-2"><span style="color:red;">Clamp 2 lines</span> 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
    <td class="text-center text-decoration-line-through">1792</td>
  </tr>

  <tr>
    <th scope="row">Star Wars: A New Hope</th>
    <td class="clamp clamp-1"><span style="color:red;">Clamp 1 lines</span> 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
    <td>1977</td>
  </tr>

  </tbody>
</table>

Learn more

Caniuse @ https://caniuse.com/#search=line-clamp
Codepen @ https://codepen.io/amarinediary/full/wvoKdzO

Since 2021 it is supported by all browser. (As IE getting replaced by Edge). See the [caniuse](https://caniuse.com/?search=line-clamp). — amarinediary, May 15 '21 at 01:50

score 4 · Answer 3 · answered Dec 16 '16 at 16:35

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.

Md. Shahidul Islam · Answer 4 · 2021-02-18T06:41:43.227

1

You can make truncate class for long text. See below class [This works on table td]

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

Works for others:

.truncate {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

edited Feb 18 '21 at 06:41

answered Feb 18 '21 at 06:06

Md. Shahidul Islam

330
3
10

score 0 · Answer 5 · answered Feb 09 '17 at 06:36

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);
}

score 0 · Answer 6 · answered Apr 12 '21 at 05:25

css text-overflow: ellipsis;

td {
    display: inline-block;
    width: 150px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    }

<table>
    <tr>
        <td>aaaa</td>
        <td>ssssssss</td>
        <td>dddddddddddd</td>
    </tr>
    <tr>
        <td>ffffffffffffffff</td>
        <td>gggggggggggggggggggg</td>
        <td>hhhhhhhhhhhhhhhhhhhhhhhh</td>
    </tr>
    <tr>
        <td>jjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
        <td>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
        <td>lllllllllllllllllllllllddddddddddddddddddddddddddddddddddddlllllllllllll</td>
    </tr>
</table>

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

6 Answers6

Example

Learn more

Linked

Related