Trim a HTML text in a div with CSS - html

Question

In order to display a list of news headers, I need a div of a fixed max-height.
That div should cut-off the text if the text overflows the div, and finish with an ellipsis in case of the cutt-off...
#lipsum {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 75px;
height: 75px;
width: 100%;
}
<div id="lipsum">
<p>
Duis eget sapien leo. Vivamus dignissim elit eget enim varius, vel condimentum tellus sodales. Vestibulum scelerisque lectus at mauris elementum finibus. Ut enim risus, venenatis sagittis mi ac, facilisis lacinia nunc. Nam ornare urna tortor, a vehicula nisl facilisis quis. Etiam enim sem, ornare a hendrerit et, convallis id quam. Ut tincidunt facilisis tincidunt. Mauris sodales euismod orci, a tincidunt massa fermentum sed. Mauris odio quam, auctor ac viverra vitae, condimentum feugiat mauris. Phasellus fermentum velit sit amet orci interdum dignissim. Praesent venenatis aliquet magna, at hendrerit felis condimentum maximus. Fusce cursus, nulla at suscipit iaculis, magna odio bibendum arcu, a tincidunt diam sapien sit amet nisl. Nullam non risus et metus tempus finibus tempus in libero. Maecenas auctor eget mauris non malesuada. Quisque erat tellus, facilisis quis mauris quis, lacinia tristique orci. Suspendisse dignissim nibh et mi consequat venenatis.
</p>
</div>
my problem is that the existing behavior is OK if there is only one line, but I don't need one signle line, but several lines of text until the max max-height...

Answer 1

You may want to refer to the following post:
With CSS, use "..." for overflowed block of multi-lines
It looks like someone also posted an article on the topic. Though, the solutions seem a bit tangential to the problem:
https://css-tricks.com/line-clampin/
Finally, here is a .js solution:
Insert ellipsis (...) into HTML tag if content too wide
EDIT: To add to this list of resources, here is a pure css solution.
http://codepen.io/martinwolf/pen/qlFdp
*Be advised that the text-overflow:ellipsis; isn't supported in every browser, yet.
Finally, here is a .js solution to the issue:

Answer 2

Unfortunately, I think that you cannot achieve your objective with this approach. According to this source, "This property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).".
So, as also stated in other answers, this cannot be done using CSS only, unless taking into account that not every browser may support such CSS3 directives. If you are planning a more general (traditional?) solution to overcome the compatibility issue, given that you already have headers, supposed short in length, you may pre-process and present them in a Wordpress-like fashion, for example. You can check out the official documentation.