在多行div中隐藏部分溢出的文本？

Question

如何删除或隐藏部分溢出的文本行？示例：

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/

编辑： 我想要结果的图像：

EDIT2： 这个similar question有一个几乎可行的解决方案，但我正在寻找一种解决方案，当没有线完全可见时，所有线都被隐藏。一个几乎可行的解决方案：http://jsfiddle.net/4Fpq2/9/（将高度更改为15px以查看其未完全正常工作的原因）

Answer 1

如果已知字体大小和盒子大小，您可以简单地设计盒子，使其包含3行文本，其中一种方法是：

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

Answer 2

像这样：

div {
    border: 1px solid black;
    line-height: 2.5ex; /* <-- default value */
    height: 7.5ex;      /* 3 * 2.5ex = 7.5ex (3 rows) */
    width:150px;
    overflow:hidden;
}

JSFiddle