Limiting number of text lines in a table cell

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,开发者_JAVA百科 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?

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; 
}

You can use jQuery for this. Example:

html

<div><span class="text">text goes here <br /></span></div>

jQuery

<script type="text/javascript">
$(function() {
    var div = $("div");
    var divText = $(".text");
    var divTextTop;
    divTextTop = ( div.height() / 2 ) - ( divText.height() / 2 );
    divText.css({
    'position' : 'relative',
    'top': divTextTop + 'px',
    'color': '#555'
    });
  });
</script>

I hope this code will help you with vertical alignment; the code is very simple.