Add text-overflow: ellipsis; to table cell

Question

I'm having trouble containing text in a table. I want to give it a text-overflow: ellipsis. But I can't seem to get it to work.

HTML:

<table class="article-table">
  <thead class="article-table__headers">
    <th>Title</th>
    <th>Source</th>
    <th>Abstract</th>
    <th>Folder</th>
  </thead>
  <% @articles.each do |article| %>
    <tr class="article-table__rows">
      <td><%= article.title %></td>
      <td><%= article.source %></td>
      <td><%= article.abstract %></td>
      <td><%= article.folder %></td>
      <td><%= link_to "Download File", download_article_path(article) %></td>
    </tr>
  <% end %>
</table>

CSS:

.article-table td {
    width: 20%;
    border-bottom: 1px solid #ddd;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}

This isn't working though. it still increases the size of the td if text is too long

Try this: height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; — Tony Duffill, Apr 22 '17 at 16:34
Possible duplicate of [CSS text-overflow in a table cell?](https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell) — Protomen, Aug 21 '18 at 20:51

score 13 · Accepted Answer · answered Apr 22 '17 at 17:00

You will need table-layout: fixed along with width set for the table. Otherwise ellipsis can only work with fixed td width. And change the value of white-space: normal to nowrap.

Looks like, your table structure also needs to be fixed, missing <tr> in <thead>, and better to add <tbody> below <thead>.

.article-table {
  table-layout: fixed;
  width: 100%;
}

.article-table td {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table class="article-table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Source</th>
      <th>Abstract</th>
      <th>Folder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The quick brown fox jumps over the lazy dog</td>
      <td>The quick brown fox jumps over the lazy dog</td>
      <td>The quick brown fox jumps over the lazy dog</td>
      <td>The quick brown fox jumps over the lazy dog</td>
    </tr>
  </tbody>
</table>

I missed `table-layout: fixed;` which has been driving me nuts for the past hour. Much appreciated mate! — VH-NZZ, Sep 24 '22 at 17:35
I think this has the same effect as the line-clamp method, but has the advantage of more efficient rendering (see https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#fixed) — David Cook, Jun 08 '23 at 04:05

chri3g91 · Answer 2 · 2021-07-23T10:09:47.203

Placing a div inside your td tag and applying the styling to the div will achieve the text-overflow: ellipsis; So no need to apply a fixed layout to the table.

You could also designate how many lines you want to allocate before the ... ellipsis should go into effect.

CSS

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

HTML

<table style="width: 100%">
  <thead>
    <tr>
      <th style="width: 25%"></th>
       <!-- add your table headers with the desired width -->
    </tr>
  </thead>
  <tbody>
    <tr>
       <td><div class="max-lines-2"></div></td>
       <!-- add your table divs with the desired width -->
    </tr>
  </tbody>
 </table>

score 0 · Answer 3 · answered Apr 22 '17 at 17:10

Ellipsis do not work with: % (.article-table td > width: 20%; - is your problem).

My trick when I want to keep in someway "%" to that div, td with ellipsis is to add 2 different dimensions:

max-width:300px; /*Inspect element in broswer and see how many pixels is 20%*/
width: 20%;

In this case ellipsis working and my div, td have the dimensions I want.

And try this for .article-table td class:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

Add text-overflow: ellipsis; to table cell

3 Answers3