Trim the characters if the text is not fitting inside fixed width table cell

Question

I have a table with fixed width table cell. The table cells can have strings with very lengthy characters. I know we can actually wrap the words or break the words with CSS properties. But I'm looking more into a solution where when the text length exceeds the table cell width, trim the word and add ... infront of the word and show the complete text on hover of the cell.

 td {
      border: 1px solid;
    }

<table style="width: 100%;">
      <tr>
        <td style="width: 120px;">
            Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
        </td>
        <td><span style="display: inline;">Short word</span></td>
      </tr>
    </table>

Something like this

Anyway to achieve this?

This is easily achievable by CSS. Why would you not want it? And you can put the entire text as tooltip — Jones Joseph, May 20 '20 at 04:59
I'm even ok with the solution from CSS. I just mentioned that I dont want to break the word and wrop in the cell, rather want to trim the word and add ... in front of it — Nikhil Bharadwaj, May 20 '20 at 05:28
I have added an answer which adds tooltip and ellipsis effect only when the text goes beyond bounds — Jones Joseph, May 20 '20 at 05:35
Does this answer your question? [How to truncate text in HTML](https://stackoverflow.com/questions/16150120/how-to-truncate-text-in-html) — Lucas S., May 20 '20 at 05:49

score 2 · Accepted Answer · answered May 20 '20 at 05:05

2

This can be done easily via css. Try this:

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

and then modify your td to include this class:

<td class="truncate">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</td>

Thank you! Shawn

answered May 20 '20 at 05:05

nkahootzShawn

165
12

Thanks.. This is exactly what I was looking. :) – Nikhil Bharadwaj May 20 '20 at 05:30
Can u kindly tell me how can we achieve this same result using JavaScript. – Ayaz Oct 13 '22 at 06:35

Dimitar Spassov · Answer 2 · 2020-05-20T05:12:14.687

You can put the long text in a separate element, which is also restricted by width and then add the text styles.

I have also added hover styles, but if there is really such a long text, the experience of hovering and seeing the text cell expanding seems a bit strange.

td {
  border: 1px solid;
}

.long-text {
  width:120px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.long-text:hover{
  overflow:initial;
  width:auto;
}

<table style="width: 100%;">
  <tr>
    <td style="width: 120px;">
     <div class="long-text"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
     </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

score 0 · Answer 3 · answered May 20 '20 at 05:05

Does something like this work for you?

 td {
   border: 1px solid;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  float: left;
    }

<table style="width: 100%;">
      <tr>
        <td style="width: 150px;">
            Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
        </td>
        <td><span style="display: inline;">Short word</span></td>
      </tr>
    </table>

Jones Joseph · Answer 4 · 2020-05-20T05:49:45.360

You can use a little bit of JS to detect if the string crosses the td's width. And use pseudo elements for ellipsis effect

You can call the following JS snippet at window resize or any other place if you want responsive text-ellipsis effect and add/remove tooltip.

var els = document.getElementsByClassName('inner-text');

for (i = 0; i < els.length; i++) {
  //check if inner text width greater than parent width
  if (els[i].offsetWidth > els[i].parentElement.offsetWidth) {
    //its a long text
    els[i].parentElement.classList.add('long-text');
    els[i].setAttribute('title', els[i].textContent);
  } else {
    //use this part if you want to remove tooltip or the class later on
  }
}

table {
  table-layout: fixed;
}

td {
  border: 1px solid;
  overflow: hidden;
}

.inner-text {
  white-space: nowrap;
  display: inline;
}

.long-text {
  position: relative;
}

.long-text:after {
  content: '...';
  position: absolute;
  right: 0;
  background: white;
  display: block;
  height: 100%;
  top: 0;
  padding: 0px 5px 0px 2px;
}

<table style="width: 100%;">
  <tr>
    <td style="width: 120px;">
      <div class="inner-text"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Some random text</span></td>
  </tr>
  <tr>
    <td style="width: 120px;">
      <div class="inner-text"> Short word
      </div>
    </td>
    <td><span style="display: inline;">Some random text</span></td>
  </tr>
</table>

P.S. I am not sure though, if using offsetWidth is the correct way here

Trim the characters if the text is not fitting inside fixed width table cell

4 Answers4