Auto-resizable ellipsis without fixed width 😮

cell-ellipsis.css

.ellipsis {
    position: relative;
}

.ellipsis:before {
    content: ' ';
    visibility: hidden;
}

.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

cell-ellipsis.html

<td>
  <div class="ellipsis">
    <span>Very very long text for this cell</span>
  </div>
</td>

Awesome!

Thanks, great workaround, works as expected!

Yes very helpful. I made an interactive version here so I could fiddle with it.

As a note to anyone else, the .ellipsis:before pseudo-element is needed because it prevents the box containing the overflowing text from collapsing vertically. The issue becomes noticeable when you have other text or content after the text with the ellipsis.