After conducting extensive research, I finally discovered a reliable method for implementing multiple Line Ellipsis (using JS, as plain CSS is not effective). Despite exploring 100 different Google results and Q/As, this is currently the only solution that actually works on various browsers including Chrome, IE 11, Firefox, etc:
http://jsfiddle.net/Warspawn/9nz3T/
The issue with the above fiddle in my case is that it assumes the text being clamped is within a single HTML tag (text-clamp being the Angular directive responsible for the task):
<p text-clamp="1">a normally very long text</p>
In my scenario, the text I need to clamp is within an h1 tag and consists of multiple elements:
<h1 text-clamp="1">{{getIntroText()}}
<span> as
<span class="highlight">{{getCount()}}</span>
</span>
<span> in
<span class="highlight">{{getAnotherPart()}}</span>
</span>
</h1>
How can I make the above Angular Directive work with my HTML structure?
This is my second fiddle featuring my h1 tag: http://jsfiddle.net/9nqyLxuf/1/
Thank you in advance,