如何垂直对齐已隐藏溢出的div中的文本？

Question

我在asp中有一个gridView，它会生成一个表。由于我需要在TD中只显示固定数量的线路，所以我决定在div中放置一个div，这样我就能实现我的目标。

table.XDataGridView td div.inner-table-div {
height: 32px;
padding: 1px;
overflow: hidden;
display: block;
}

.rfTaskExecutionWrapper td {
    min-width: 100px;
    font-size: 12px;
}

我希望第一列在中心垂直对齐，第二列相同。我还希望只显示2行或3行文本。为此，我限制了高度虽然看起来我仍然看到一些第三行的文字 - 我不想要。

解决方案必须适用于chrome和Internet Explorer 7（在Windows CE上）。

Answer 1

可以使用td上的vertical-align: middle垂直对齐表格单元格的内容。

如果您想确保第二个colomn中只有两条线可见，请使用line-height。 div的高度为32像素。你在顶部和底部有一个1像素的填充，所以留下30像素。 （假设您正在使用标准的大小调整大小）这意味着如果您将line-height: 15px添加到div中，您将只看到两行而没有尾随的第三行。