Ellipsis for text overflow in table cell?

[mirko77]

Hi there,

I was wondering if it is possible to have the table behave like when I set table-layout: fixed; on the table and then text-overflow:ellipsis on the cell, so the text will always be on a single line with ...

I tried to play with the css but no luck...

[tkirda]

Yes it is possible. Wrap your content into div with the class and set style on that class:

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

[mirko77]

I tried but it does not work, the text is on a single line and trimmed but the overflow is not replaced by the ellipsis.

I also tried on the example here adding long text to a cell and then play with the css but I get the same result, no ellipsis showing

See screenshot

[tkirda]

That's right, I did not include all the details. This should work:

.cell {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: block;
    padding: 8px;
    width: 100%;
}

.cell-overflow {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

<div class="cell">
    <div class="cell-overflow">
        Long content...
    </div>
</div>

[mirko77]

It does work indeed!

Many thanks

[FredericHeem]

In my use case, overflow:hidden is also needed in the cell-overflow class

[alexedev]

@tkirda Thanks, you just saved my day!

[mobimation]

Now in 2017 useful with fixed-data-table-2 also !

[sdhhqb]

No need to use two div wrappers, just set

table-layout: fixed;

[tuanvayn]

No need to use two div wrappers, just set

table-layout: fixed;

Many thanks btw all of the columns have the same width size. how to make size of the first column is smallest?

[tkirda]

There is width property on the column.

[SevenZark]

If you go this route, you HAVE to manually set a width on every column on every table in your entire app, if you want anything other than forced equal-width columns. This is a nightmare in a large application. I still have not found a solution which preserves one of the biggest advantages html tables give us - intelligent auto-sizing of columns. With this approach you're hobbling that completely.