Give ellipsis in percentage

Question

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 width in pixels. But in my project, I can't use a fixed width to the span element. The span element must be completely stretched inside the respective td element which is possible by using width: 100%.

My question is: How to make the ellipsis work fine by stretching the span element completely inside the td element?

span {
    width: 100%;    /* In pixels, it is working fine */
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}

Here is the Fiddle

I am looking for a solution which can be a pure css or javascript or jQuery. The solution should work in IE8+ and firefox.

PS: I can't calculate the width of the span dynamically due to some project restrictions.

EDIT: I can't restrict the widths of the td elements, because I am implementing column resizable on td elements.

score 4 · Answer 1 · answered Jul 12 '13 at 07:01

4

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/

answered Jul 12 '13 at 07:01

keaukraine

5,315
29
54

I saw this solution before. but I can't do this because I need to do column resize later. – Mr_Green Jul 12 '13 at 07:02

score 2 · Answer 2 · answered Jul 12 '13 at 07:02

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

answered Jul 12 '13 at 07:02

Sowmya

26,684
21
96
136

1

Sorry, I didn't understand your solution. :) – Mr_Green Jul 12 '13 at 07:29
1

Cool... When u get to know about flex property u will look back here so no issues :) – Sowmya Jul 12 '13 at 07:38

score 1 · Accepted Answer · answered Jul 12 '13 at 07:06

1

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

answered Jul 12 '13 at 07:06

achudars

1,486
15
25

Man, you are genius. I don't know how this worked. but giving `max-width: 10px` solved the problem. :D. I still need to test it thoroughly though. Thanks. – Mr_Green Jul 12 '13 at 07:13
Tested. Working fine in IE8+ and firefox. but I am still confused whether to go with this fix or not. – Mr_Green Jul 12 '13 at 07:28
you could experiment with em instead of px or percentages, then it might be a bit more flexible – achudars Jul 12 '13 at 07:43

Give ellipsis in percentage

3 Answers3

Linked