Усечение текста в пределах диапазона в таблице

Question

У меня есть настройка таблицы, чтобы обрезать текст отлично .... пока я не обернут текст в эту таблицу в div. Смотрите эту JSFiddle в качестве примера: http://jsfiddle.net/3DKMJ/

Это работает для усечения текста в ячейке:

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

Это не работает для усечения текста в ячейке:

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

Вот мой css:

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

Вещь о div заключается в том, что она все еще предотвращает xt от обертывания, и текст просто скрыт, но эллипсы, которые я установил для показа, не отображаются с прикрепленным div.

Любые идеи, как заставить это работать, когда в таблице находятся div?

[EDIT] Как уже упоминалось, я мог бы добавить к нему td, td div {, и это сработает. Я понял это после публикации, моя проблема кажется более конкретной. На самом деле у меня есть диапазон, который отображается как встроенный блок. Я предположил, что это была часть блока, которая вызывала проблемы, но я думаю, это факт, что это промежуток с встроенным блоком. Смотрите эту upadted скрипку: http://jsfiddle.net/P2PZW/2/

Answer 1

Вы можете использовать display:inline; на div элементов в вопросе.

jsFiddle here.

---

В ответ на вопрос: редактировать

Используйте display:inline вместо display:inline-block на вашем td span.

jsFiddle here.

---

В ответ на комментарии:

Если вам действительно нужно, чтобы сохранить его как display:inline-block, вы можете сделать это следующим образом:

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

jsFiddle here.

Answer 2

Попробуйте

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

вместо

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