css - 我该怎么做文本溢出 : ellipsis on two lines?

Question

我有一个容器，其中的文本可能会扩展为两行，高度为 40 像素，字体大小为 18 像素。当我这样做时:

text-overflow: ellipsis;
white-space: nowrap;

然后虚线正确显示，但在一行中被截断。当我这样做时:

text-overflow: ellipsis;

然后它正确显示了 2 行，但末尾没有“...”。我如何实现这一点，以便正确使用两行并在第二行以“...”结束？

Answer 1

您可以使用 -webkit-line-clamp 来实现。但是需要破解。您需要设置 div 的高度，使其只能容纳两行。

请参阅此代码笔 https://codepen.io/VamsiKaja/pen/xYZVzY

HTML 文件:

<p>Pellentesque habitant morbi tristique senectus et netus et</p>

CSS 文件:

p {
    width:250px;  
    font-size:20px;
    margin:1em;
    height:50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}