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

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

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