Question:

How can I display just 2 lines of text ending with 3 dots with dynamic width by a slider and then the 'read more' link next to it in the second line?
The 'read less' link should be at the end of the expanded text.

What I want:

qwertzuiopölkjhgfdsayxcver  
wefrtzuiokjhgp...     More

enter image description here

qwertzuiopölkjhgfdsayxcver  
wefrtzuiokjhgpswdfsfdfsafd     
sdfdgffdsgfg  Less

Code:

CSS:

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

HTML:

<div [class.line-clamp-2]="!isCollapsed">
    <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<a *ngIf="showButton" (click)="toggleReadMoreButton()" class="read-more">{{
    isCollapsed ? ('COMMON.WENIGER' | transloco) : ('COMMON.MEHR' | transloco)
}}</a>