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?
