Check if span element contains more than 3 lines
<p>I'm trying to do a trick with a span element. There is an image attached so that I can explain easier.</p>

<p><em>Left</em> current behavior &rarr; <em>Right</em> desired one</p>

<p><a href="https://i.stack.imgur.com/9K4BJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9K4BJ.png" alt="enter image description here"></a></p>

<p>So the idea is I need to display in the span element only 3 lines of text. Having more than 3 I need to make such that only 3 are displayed and the last word is [...] (when hover the remaining text is viewed - dis part is done). </p>

<p>I've tried something like this on the css side</p>

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

<p>and yes it works ok, shows only 3 lines every time but if i have more I have no idea how can I handle the case that I was talking about. </p>

<p>I'm thinking of comparing the height of the text with the height of the span and if the height of the text is greater than do some .js, but I have no idea how to do this.</p>

<p>I have 40 messages that can be displayed and the name of the article which is between "" can be of any length. </p>

<pre><code>    var trimedMessage = message;

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

    return trimedMessage;
</code></pre>

<p>This is something that I've tried previously but due to the fact that the message is very dynamic I cannot handle all the cases. </p>

<p>So in the end my question is how can I calculate the difference between the span element height and the message. Or if any other ideas they are more than welcome </p>

<p>Thank you </p>

<p>PS: this is the HTML</p>

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