javascript - 检查span元素是否包含3行以上

我正在尝试使用span元素完成一项技巧。附有图像，以便于我解释。

左当前行为→右期望一个



因此，我的想法是我只需要在span元素中显示3行文本即可。 daccess-ods.un.org daccess-ods.un.org超过3个，我需要使仅显示3个，并且最后一个单词是[（将鼠标悬停在查看其余文本时，分开完成）。

我在css方面尝试过这样的事情

span.itemMessage
{
    display: block; /* or inline-block */
    height: 37px;
    overflow: hidden;
    position: relative;
}

是的，它可以正常工作，每次只显示3行，但是如果我有更多行，我不知道如何处理我正在谈论的情况。

我正在考虑将文本的高度与跨度的高度进行比较，以及文本的高度是否大于某些.js，但是我不知道该怎么做。

我有40条可以显示的消息，“”之间的文章名称可以任意长度。

    var trimedMessage = message;

    //try {
    //    var first = message.split('“');
    //    var second = first[1].split('”');
    //    var article = second[0];
    //    if (article.length >
    //    if (message.length > 80) {
    //        var newItem =
    //    }
    //}
    //catch (err) { }

    return trimedMessage;

这是我之前尝试过的事情，但是由于该消息非常动态，因此我无法处理所有情况。

因此，最后我的问题是如何计算span元素高度和消息之间的差异。或者，如果有其他任何想法，那么欢迎

谢谢

PS：这是HTML

<div class="notification ' + classColor + '">' +
                       '<a href="#">' +
                           '<i class="category-icon fa ' + classIcon + '"></i>' +
                           '<span class="abonnementMessage" data-toggle="tooltip" data-placement="left" title="' + abonnementMessage + '"maxlength="10">' + abonnementMessage + '</span>' +
                           '<small><i class="fa fa-warning">' + date + '</i> </small>' +
                       '</a>

最佳答案

有一个纯CSS解决方案。诀窍是使用CSS line-clamp。
这是一个有效的示例：https://codepen.io/martinwolf/pen/qlFdp（甚至包含针对不支持换行的浏览器的解决方案）

希望这可以帮助！