截斷表內的跨度內的文本

我有一個表格設置截斷文本完美....直到我把該表中的文本換成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的事情是，它仍然阻止te xt從包裝，文本只是隱藏，但我設置顯示的省略號不顯示附加div。

任何想法如何讓這個工作，當div內的表內？

[編輯]如上所述，我可以添加td, td div {它，這將工作。我發佈後意識到這一點，我的問題似乎更具體。我實際上有一個跨度被顯示爲內聯塊。我認爲這是導致問題的塊部分，但我想這是一個事實，它是一個內聯塊的跨度。看到這個upadted小提琴：http://jsfiddle.net/P2PZW/2/

來源

2013-05-17 BlueCaret

你可以對有問題的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.

來源

2013-05-17 22:10:54 lifetimes

但是f或者這個scenerio我需要使用一個內聯塊。內聯不會做同樣的事情。也許這是不可能的？ – BlueCaret

@BlueCaret爲什麼你必須使用內聯塊？ – lifetimes

嗯真相被告知我能夠解決這個問題，所以我不需要內聯塊，但我只是試圖爲將來證明這一點，所以如果有人要添加一個內聯塊，它仍然會工作。 – BlueCaret

嘗試

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

代替

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

來源

2013-05-17 22:10:07 sbxmal

截斷表內的跨度內的文本

回答

相關問題