Проблема, чтобы иметь эллипсы в несколько строк, используя угловые 7

Question

Я пытаюсь показать эллипсы в многострочном блоке в Angular. Но сталкиваюсь с вопросом ниже.

component.html

<div class="test" [innerHtml]="anchor1.length >= 200 ? anchor1.substring(0,242) + '...' : anchor"></div>

component.ts

anchor1 = 'Lorem ipsum dolor sit amet, id nam probo vidisse feugait.Lorem ipsum dolor sit amet, id nam probo vidisse feugait. Liber invenire expetendis eu duo, constituto assueverit ex mei. Mea ea quot mundi. <a href="abcdefghi.com">Test</a> <a href="#">test 2</a>';

стекблиц: https://stackblitz.com/edit/angular-ksgxdj

Ожидаемый вывод должен быть "Test ...", но я получаю его как "Test" в конце строки.

Так как у меня есть этот сценарий, где якорь может быть где угодно, я смоделировал сценарий, используя подстроку и жестко закодированные значения.

Здесь Angular рендерит

Lorem ipsum dolor etc etc <a href="abcdefghi.com">Test</a> <a href="#"...

Который усекается до

Lorem ipsum dolor etc etc <a href="abcdefghi.com">Test</a>

Answer 1

Вы можете обрезать текст следующим образом (используя трубу среза)

{{ (str.length>6)? (str | slice:0:6)+'..':(str) }}

Answer 2

Я лично использую библиотеку ng-truncate, чтобы добиться этого, зачем изобретать велосипед.https://github.com/yellowspot/ng2-truncate

Пример:

Импортируйте его в свой модуль

import { TruncateModule } from "@yellowspot/ng-truncate";

@NgModule({
  declarations: [
  ...
  ],
  imports: [
     TruncateModule,
  ]
});

По вашему мнению вы можете сделать

<div class="test" [innerHtml]="anchor | truncate:200"></div>