如何在行邊界處截斷表溢出？

Question

我有一個div內的表，可以有任意的行。有時行會擴展以容納多行文本。該div有一個固定的高度和溢出：隱藏。

我的問題是，是否有可能截斷表，使溢出發生在行邊界？

例如，有沒有辦法讓這個：

是這樣的：

主要的缺點是，這種不得使用JavaScript。這是可能的HTML/CSS？如果有必要，我可以在代碼隱藏（ASP.NET Webforms）中做一些事情，儘管我想避免它。

它必須在IE7和IE8中工作。顯示的行數不固定 - 取決於有多少行以額外文本溢出。

Answer 1

除非你戴上這個JavaScript魔術帽，否則你不能削減被div溢出特別限制的行。 CSS不知道你的內容是如何渲染的，或者不知道 - 這取決於瀏覽器。

您可以隱藏每一個通過，而不是做這樣的事情的任意行之後來到行：

#somediv #sometable tr:nth-child(5) ~ tr { 
    display: none; 
} 

唯一真正的問題是，雖然~是IE7及更高版本的支持，只有IE9支持:nth-child()。你可以解決，通過堆疊多個+組合程序，但你最終有一個相當長的選擇：

#somediv #sometable tr:first-child + tr + tr + tr + tr ~ tr { 
    display: none; 
} 

如果在你的表太多行，限制了你的頁面的行數代碼隱藏可能更好一些，因爲你可以通過削減額外的幾百個字節來節省一些帶寬，否則這些字節會被傳輸但從未被看到。