Give Ellipsis In Percentage

I am trying to give ellipsis to a span element which is inside td element. The problem is that the ellipsis is working if and only if I give the span element a fixed width i.e widt

Solution 1:

In short, you need to add this:

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

The cause is not in span element but because table's td elements do not have defined 33% width - they expand according to width of td content. To make them fixed width, you need to apply table-layout:fixed; rule to your table.

Live fiddle: http://jsfiddle.net/m5gGr/

Solution 2:

Hope this can help you

.parent-div {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;        
    min-width: 0;
}

.icon {
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}

DEMO

More about box-flex property

Solution 3:

You can potentially add a max-width property to the td element:

th, td {
    width: 33%;
    border: 1px solid black;
    max-width:200px;
}

Here's the jsFiddle