title: Multiple Line Ellipsis (clamp) through multi level html tags, which also works on IE, Firefox etc
body: <p>After hours of research, i finally found a functioning way for having multiple Line Ellipsis (with JS, with plain CSS is not possible). 100 different Google results and Q/As, but currently this is the only one which works (only cause this one works not just on Chrome, but also on IE 11, Firefox etc.):</p>
  
  <p><a href="http://jsfiddle.net/Warspawn/9nz3T/" rel="nofollow noreferrer">http://jsfiddle.net/Warspawn/9nz3T/</a></p>
  
  <p>In my case, the problem in this fiddle is, it assumes that the text which is clamped, is inside a one single html tag (text-clamp ist the angular directive which does the job):</p>
  
  <pre><code> &lt;p text-clamp="1"&gt;a normally very long text&lt;/p&gt;
  </code></pre>
  
  <p>In my case, the text i want to clamp is a h1 and it consists of multiple elements:</p>
  
  <pre><code>&lt;h1 text-clamp="1"&gt;{{getIntroText()}}
        &lt;span&gt;&amp;nbsp;as&amp;nbsp;
           &lt;span class="highlight"&gt;{{getCount()}}&lt;/span&gt;
        &lt;/span&gt;
        &lt;span&gt;&amp;nbsp;in&amp;nbsp;
            &lt;span class="highlight"&gt;{{getAnotherPart()}}&lt;/span&gt;
        &lt;/span&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>How can i get the above angular Directive working with my html?</p>
  
  <p>This is my 2. fiddle with my h1 tag:
  <a href="http://jsfiddle.net/9nqyLxuf/1/" rel="nofollow noreferrer">http://jsfiddle.net/9nqyLxuf/1/</a></p>
  
  <p>Thanks in advance,</p>