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

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