Text-overflow: Ellipsis In Table-cell Without Width

I'm trying to achieve a responsive table width text-overflow: ellipsis; in the middle cell that looks like this: | Button 1 | A one-lined text that is too long and has to be... | B

Solution 1:

This is not really a clean solution, but it uses no JS and works in every browser I've tested.

My solution consists in wrapping the cell's contents inside a table with table-layout: fixed and width: 100%.

See the demo.

Here's the full solution:

<tableclass="main-table"><tr><tdclass="nowrap">Button 1</td><td><tableclass="fixed-table"><tr><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td></tr></table></td><tdclass="nowrap">Button 2</td></tr></table>

.main-table {
    width: 100%;
}

.fixed-table {
    /* magic */width: 100%;
    table-layout: fixed;

    /*not really necessary, removes extra white space */border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
.fixed-tabletd {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nowrap {
    /* used to keep buttons' text in a single line,
     * remove this class to allow natural line-breaking.
     */white-space: nowrap;
}

---

It's not really clear what's the intent for the side buttons, hence I've used white-space: nowrap to keep them in the same line. Depending on the use case, you may prefer to apply a min-width and let them line-break naturally.

Solution 2:

Set your 100% width on the table and specify a fixed table-layout:

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

Then, set the following for whichever table cell should have the ellipsis:

td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Voila! Responsive table with an ellipsis overflow!

Demo: http://jsfiddle.net/VyxES/

Solution 3:

HTML

<tr><td><spanclass="ellipsis"> A very looooooooooooooooooooooooooooooong string</span></td></tr>

CSS

td {
    position: relative;
}

.ellipsis {
    /*Here is the trick:*/position: absolute;
    width: 100%;
    /*End of the trick*/text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Solution 4:

A cleaner way would be to simply set a max-width on the td.

Based on @Fabrício Matté's reply,

http://jsfiddle.net/V83Ae/89/

<table class="main-table">
<tr><tdclass="nowrap">Button 1</td><tdclass="truncate">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td><tdclass="nowrap">Button 2</td></tr>

And

body { margin: 0; }

.main-table {
    width: 100%;
}

.truncate {
    text-overflow: ellipsis;
    white-space  : nowrap;
    overflow     : hidden;
    max-width    : 100px; /* Can be any size, just small enough */
}

.nowrap {
    white-space: nowrap;
}

I have no idea why this works, but it does, so if someone can figure how why applying a max-width works then please let me know as I did it by accident.

Solution 5:

After banging my head for hours, with no solution that worked, finally found it.

The element you want for the base of the overflow nees a min/max width, where the max is inferior to the min width. You can then overflow the lement or a child of it, where you can set the with whatever way you choose: %, px, auto.

I tried it in more than one tricky situation and it works on all.

I'll try to post a fiidle with my examples but this should help you going.

/* Apply on base element for proper overflow */max-width: 1px;
min-width: 10000px;

/* Apply on self or child, according to need */width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;