html - 截断表中跨度内的文本

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 的事情是它仍然阻止文本换行，并且文本只是隐藏，但是我设置要显示的省略号不会显示附加的 div。

当表格中有 div 时，有什么想法可以让它发挥作用吗？

[编辑] 如前所述，我可以将 td, td div { 添加到其中，这样就可以了。发帖后我意识到了这一点，我的问题似乎更具体。我实际上有一个显示为内联 block 的跨度。我认为这是导致问题的 block 部分，但我想这是一个带有内联 block 的跨度。看到这个更新的 fiddle :http://jsfiddle.net/P2PZW/2/

Answer 1

您可以在有问题的 div 元素上使用 display:inline;。

jsFiddle here.

---

回复问题编辑:

在 td span 上使用 display:inline 而不是 display:inline-block。

jsFiddle here.

---

回复评论:

如果您确实需要将其保留为display:inline-block，您可以这样做:

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

jsFiddle here.