I want to force my text to always be two lines.
If it's longer than two lines then it should have "..." at the end.
If it's shorter, then the second line should be empty.
Can this be done with CSS only?
I'm posting this again cause someone closed it as duplicate but linked a solution which isn't what I'm asking. This is the solution linked:
Limit text length to n lines using CSS
but it doesn't cover one of my cases (when the text is shorter than 2 lines)
EDIT: Here's a JSFiddle showing how in my other case it doesn't work:
https://jsfiddle.net/Lukgzefy/
<div class="cards">
<div class="card">
<div class="img"></div>
<h2>lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur amet adipiscing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur consectetur adipisicing elit. Explicabo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
</div>
As you can see, the first one should occupy 2 lines (and the second should be empty) but instead it only takes one, throwing the whole thing off.
