Question

I have a table cell where I need to limit the text to a max of two lines.
I tried achieving this by placing an inner div with a limited height:

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>

However, in this case the cells which have only one line of text are not vertically aligned to the middle. I know there are ways to vertically align a text within a div, but most of the ones I found seemed a bit complicated and/or hacky (like this one), and felt like a bit of an overkill.

Is there a different way to effectively limit the number of lines inside the cell, or a simple way to align the text in the way I did it?

Answer 1

try this :

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

instead of this :

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