html - 限制表格单元格中的文本行数

Question

我有一个表格单元格，我需要将其中的文本限制为最多两行。
我尝试通过放置一个高度有限的内部 div 来实现这一点:

div 
{ 
  border: 1px solid #EECCDD;  
  width: 100px;
  height: 40px; 
  overflow: hidden; 
}

<div>
   <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
<div>
   <p>bla bla bla bla</p>
</div>

但是，在这种情况下，只有一行文本的单元格不会垂直居中对齐。我知道有一些方法可以在 div 中垂直对齐文本，但我发现的大多数方法似乎有点复杂和/或老套(比如 this one )，感觉有点矫枉过正。

有没有其他方法可以有效地限制单元格内的行数，或者有一种简单的方法来按照我的方式对齐文本？

Answer 1

试试这个:

 div {   border: 1px solid #EECCDD;    width: 100px;  height: auto;   max-height: 40px;  overflow: hidden; }

而不是这个:

 div {   border: 1px solid #EECCDD;    width: 100px;  height: 40px;  overflow: hidden; }