截断表格内跨度内的文本

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/

我有一个表设置来完美地截断文本....直到我将该表中的文本包装成div。以JSFiddle为例: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:

这是我的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.

关于div的事情是它仍然阻止文本包装,文本只是隐藏,但我设置显示的省略号不显示附加div。

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

任何想法如何在表中有div时使其工作?

[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/

[编辑]如上所述,我可以添加td,td div {它,这将有效。我发布后意识到这一点,我的问题似乎更具体。我实际上有一个跨度显示为内联块。我认为是导致问题的块部分,但我想这是一个内联块的跨度。看到这个upadted小提琴:http://jsfiddle.net/P2PZW/2/

2 个解决方案

#1

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

你可以使用display:inline;关于div元素。

jsFiddle here.

---

In reply to question edit:

在回复问题编辑时:

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

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

jsFiddle here.

---

In reply to comments:

在回复评论时:

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

如果你真的需要将它保持为显示:inline-block,你可以这样做:

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

jsFiddle here.

#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; }