title: Check if span element contains more than 3 lines
body: <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>