截断表格内跨度内的文本

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 {它,这将工作.我发布后意识到这一点,我的问题似乎更具体.我实际上有一个跨度显示为内联块.我认为这是导致问题的块部分,但我想这是一个内联块的跨度.看到这个upadted小提琴:http://jsfiddle.net/P2PZW/2/

Answer 1

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

jsFiddle在这里.

在回复问题编辑时:

使用display:inline而不是display:inline-block你的td span.

jsFiddle在这里.

在回复评论时:

如果你真的需要保留它display:inline-block,你可以这样做:

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

jsFiddle在这里.