智能剪裁超出框边界的文本

Question

我需要在具有明确宽度/高度的框中显示一些文本。如果文本内容超过了框的高度，我希望被截断，最好用省略号。

我尝试使用overflow: hidden，如下所示：

<div style="width: 500px; height: 50px; 
     overflow: hidden; 
     border: 1px solid black;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut sem orci. Sed laoreet, diam sed porttitor rhoncus, erat ante volutpat metus, dignissim laoreet lacus dolor a nisi. Fusce elit libero, interdum vel cursus tincidunt, vulputate quis lorem. In accumsan pharetra mauris, id vulputate sapien condimentum in. Etiam quis laoreet lectus
</div>

但这通常导致一行文字部分可见，如下所示：

我考虑过计算字符并手动截断文本，但是当字体成比例时，这无济于事。

Answer 1

尝试使用line-height来修复每条线的高度，然后将容器高度设置为线高的倍数。例如：

line-height: 15px;
height: 45px; /* 3 lines */

Answer 2

虚拟隐形div

如果您无法根据@ casablanca的建议设置身高，我建议您使用虚拟隐形div剪辑文字，如另一个answer of mine中所述。