如何垂直對齊已隱藏溢出的div中的文本？

Question

我有一個在asp中的gridView會生成一個表格。由於我需要在TD環視中只顯示固定數量的行，所以我決定在td中放置一個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，你只會看到兩行，沒有第三行。