Многострочный многоточие (зажим) через многоуровневые HTML-теги, который также работает в IE, Firefox и т. Д.

Question

После нескольких часов исследований я, наконец, нашел способ функционирования многолинейного многоточия (с JS, с простым CSS невозможно). 100 различных результатов Google и Q / As, но в настоящее время это единственный, который работает (только потому, что этот работает не только в Chrome, но и в IE 11, Firefox и т. Д.):

http://jsfiddle.net/Warspawn/9nz3T/

В моем случае проблема в этой скрипке заключается в том, что предполагается, что текст, который зажат, находится внутри одного тега html (text-зажим - это угловая директива, которая выполняет работу):

 <p text-clamp="1">a normally very long text</p>

В моем случае текст, который я хочу зафиксировать, представляет собой h1 и состоит из нескольких элементов:

<h1 text-clamp="1">{{getIntroText()}}
      <span>&nbsp;as&nbsp;
         <span class="highlight">{{getCount()}}</span>
      </span>
      <span>&nbsp;in&nbsp;
          <span class="highlight">{{getAnotherPart()}}</span>
      </span>
</h1>

Как получить указанную выше угловую директиву, работающую с моим html?

Это моя 2. скрипка с моим тегом h1: http://jsfiddle.net/9nqyLxuf/1/

Заранее спасибо,

Answer 1

Просто используйте тег HTML title для отображения текста при наведении курсора, и директива AngularJS limitTo сделает свое дело

<h1 title="{{foo}}"> {{introText | limitTo:9}} as <span>{{text | limitTo:5}}</span> in {{text2 | limitTo:1}}...

Рабочая скрипка