0

i have tried the following code to my td, but no good sign.

.td_class{
max-width:100px;
overflow: hidden;
text-overflow : ellipsis;
-ms-text-overflow : ellipsis; 
}

any help?

user2324085
  • 63
  • 1
  • 3
  • 11
  • possible duplicate of [text-overflow:ellipsis doesn't work on IE](http://stackoverflow.com/questions/14664195/text-overflowellipsis-doesnt-work-on-ie) – mortb Sep 26 '13 at 07:38
  • use `white-space: nowrap` without it ellipsis is not possible. – Mr_Green Sep 26 '13 at 07:38

3 Answers3

0

Try this,

td
{
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
0

It will work, if you wrap the text in the <th> in an additional element and apply the width and overflow to that:

http://jsfiddle.net/nkLav9f7/6/

<table>
    <thead>
        <tr>
            <th><span>This is a really long header</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>foo</td>
        </tr>
    </tbody>
</table>

table, td { border: solid 1px black }

th
{
    max-width: 50px;
}

span
{
    overflow: hidden;
    display: block;
    width: 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
Phil Peace
  • 733
  • 1
  • 7
  • 20
0

If you have set "word-wrap: bread-word" in other style like "*{word-wrap: bread-word}", please change it to "word:wrap: normal". It works for me.

lynch
  • 1