如何在行边界处截断表溢出？

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

如果在你的表太多行，限制了你的页面的行数代码隐藏可能更好一些，因为你可以通过削减额外的几百个字节来节省一些带宽，否则这些字节会被传输但从未被看到。