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

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 */