Question

我有一个动态生成内容的网格视图。由于此网格用于主要从带有Internet Explorer 7的Windows CE访问的页面，因此与Ie7兼容的解决方案非常重要。

所以 - 由于屏幕非常小，我们无法显示太多文字。所以我们决定在一个单元格中只显示最多3行文本，如果少则应该在中间垂直对齐。表格行的固定高度为41px;

我找到了许多解决方案 - 但是如果它起作用，那么中心就不会起作用，等等。有人可以帮我这个吗？

Update1：我刚刚发现他也必须在IE6中工作。

Answer 1

您是否尝试在块内嵌套块？

在表格单元格上：vertical-align: middle; height: 41px;

然后在单元格内部，有一个块元素，最大高度为3行文本（您应该使用该值）并隐藏溢出：max-height: 35px; overflow: hidden;

<td><div>TEXT</div></td>

您应该能够使用font-size和line-height确定正确的高度，或者测试一下。

这样，只有3行文本可见，块元素仍然在单元格中垂直居中。

Answer 2

我正在扩展@Simon回答

我发现一个问题是表格行倾向于忽略css高度值。为了强制身高，我制作了<td> display:block元素来强制执行Alexa的41px高度规则。
好处是它符合您的要求，缺点是我不知道这会如何影响表格渲染/行为。

另外，为了强制执行不超过3行的文字，我必须将<div> line-height设置为1em，将max-height设置为3em

＆＃13;

table {
  border-collapse: collapse;
}
table,
th,
td {
  border: 1px solid black;
}
tr {
  height: 41px;
  max-height: 41px;
  display: block;
  overflow: hidden;
}
td {
  width: 33%;
}
td div {
  border: 1px solid red;
  font-size: 11px;
  line-height: 1em;
  max-height: 3em;
  overflow: hidden;
  padding: 2px;
}

＆＃13;

<table>
  <tr>
    <td>
      <div>Lorem ipsum dolor sit amet</div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut est sit amet ex scelerisque porttitor quis non nunc. Phasellus consectetur nunc eget erat pellentesque faucibus. Donec magna felis, scelerisque eget odio id, euismod mollis ligula.
        Nam maximus, eros id dapibus efficitur, nibh neque ultricies dui, eget elementum sapien ante eu massa. Aliquam malesuada velit vitae sagittis semper. Nam iaculis sagittis dignissim. Nulla facilisi. Maecenas consectetur mi a nisl dictum laoreet.
        Suspendisse est dui, aliquet non efficitur eget, imperdiet a odio. Praesent iaculis porttitor efficitur.</div>
    </td>
  </tr>
</table>

＆＃13;

如何在gridView的单元格中垂直对齐显示最多3行内容？

2 个答案: