Hiding partly overflowing text in a multi-line div?

Question

How do I remove or hide a partly overflowing text row? Example:

Html:

<div>Lot of interesting text in this multi-line box but how do I remove or hide the last line</div>

Css:

div {
    border: 1px solid black;
    height:65px;
    width:150px;
    overflow:hidden;
}

https://jsfiddle.net/7mudnnco/

Edit: Image of how I want the result:

Edit2: This similar question has a almost working solution but I am looking for a solution where all lines is hidden when no line is fully visible. An almost working solution: http://jsfiddle.net/4Fpq2/9/ (Change height to 15px to see why it is not fully working)

Answer 1

If the font size and the box size are known you can simply design the box so it contains exactly 3 lines of text, one way to do that would be:

div {
    border: 1px solid black;
    height:65px;
    width:150px;
    overflow:hidden;
    line-height: 22px;   
}