检查span元素是否包含超过3行

Question

我正在尝试使用 span 元素来实现一个技巧。附有一张图片，以便我可以更容易地解释。

\n\n

左当前行为 →右期望行为

\n\n

\n\n

所以我的想法是我需要在 span 元素中仅显示 3 行文本。超过 3 个时，我需要只显示 3 个，最后一个单词是 [...] （当悬停时，会看到剩余的文本 - 这部分已完成）。

\n\n

我在 css 方面尝试过类似的方法

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

    var trimedMessage = message;\n\n    //try {\n    //    var first = message.split(\'\xe2\x80\x9c\');\n    //    var second = first[1].split(\'\xe2\x80\x9d\');\n    //    var article = second[0];\n    //    if (article.length > \n    //    if (message.length > 80) {\n    //        var newItem = \n    //    }\n    //}\n    //catch (err) { }\n\n    return trimedMessage;\n

\n\n

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

\n\n

所以最后我的问题是如何计算跨度元素高度和消息之间的差异。或者如果有任何其他想法，我们非常欢迎

\n\n

谢谢

\n\n

PS：这是HTML

\n\n

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

\n

Answer 1

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

希望这可以帮助！