CSS "table-cell"样式元素 : Maximum height (and overflow: hidden)

Question

我在 display: table div 中有一个 display: table-cell div。有什么办法可以限制高度吗？我试过设置高度、最大高度和溢出:隐藏，但没有效果。 (height 确实设置了最小高度，但其他的似乎什么都不做。

请参阅 http://jsbin.com/gajaka/1/edit 中的示例

<div class='table'>
  <div class='cell'>This should be maximum 100px. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

CSS

.table {
  display: table;
  background: green;
  width: 100px;
  height: 100px;
  max-height: 100px; /* ignored */
  overflow: hidden; /* ignored */
}

.cell {
  display: table-cell;
  vertical-align: middle;
  max-height: 100px; /* ignored */  
  text-align: center; /* doesn't work */  
}

Answer 1

就我在这段代码中看到的而言，您似乎正在使用表格单元格显示来垂直对齐文本。但是，table-cell 有一个固有的折衷，即您失去了对 y 维度的控制；也就是说，如您所见，表格单元格将忽略所有高度参数。

解决此问题的方法是将 display 子属性从 table-cell 更改为 inline-block。然后，为了获得垂直居中，我们可以执行以下操作:在 .table 元素内放置一个伪元素并垂直对齐它。垂直对齐需要相对于另一个内联元素，因此这个伪元素为 .cell 提供了一个引用，使其自身垂直对齐。这应该垂直对齐您的文本。

新输出:http://jsbin.com/faqadumasado/1/edit?html,css,output

关于“在未知中居中”的文章描述了上面的垂直居中技术:http://css-tricks.com/centering-in-the-unknown/