Truncating text within a span within a table

Question

I have a table setup to truncate text perfectly.... until I wrap the text in that table into a div. See this JSFiddle as an example: http://jsfiddle.net/3DKMJ/

This works for truncating the text in the cell:

<table>
  <tr>
    <td>Text</td>
  </tr>
</table>

This does not work for truncating the text in the cell:

<table>
  <tr>
    <td><div>Text</div></td>
  </tr>
</table>

Here is my css:

table {border:1px solid #000; width:100px;table-layout: fixed;}
td { width:100px;white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }

The thing about the div is that it still prevents the text from wrapping, and the text is just hidden, but the ellipses that I have set to show don't show with the div attached.

Any ideas how to get this to work when there are div's within the table?

[EDIT] As mentioned, I could add td, td div { to it and that will work. I realized this after posting, my problem seems to be more specific. I actually have a span that is being displayed as an inline block. I assumed it was the block part that was causing problems, but I guess it is the fact that it is a span with an inline block. See this upadted fiddle: http://jsfiddle.net/P2PZW/2/

Answer 1

You could use display:inline; on the div elements in question.

jsFiddle here.

---

In reply to question edit:

Use display:inline instead of display:inline-block on your td span.

jsFiddle here.

---

In reply to comments:

If you really need to keep it as display:inline-block, you can do it like this:

td span {
   display:inline-block; 
   text-overflow:ellipsis;
   overflow:hidden; 
   width:100%;
}

jsFiddle here.

Answer 2

Try

td, td div { width:100px;white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }

instead

td { width:100px;white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }