Pregunta:

¿Cómo puedo mostrar solo 2 líneas de texto que terminan con 3 puntos con ancho dinámico mediante un control deslizante y luego el enlace 'leer más' al lado en la segunda línea?
El enlace 'leer menos' debe estar al final del texto expandido.

Lo que quiero:

 qwertzuiopölkjhgfdsayxcver wefrtzuiokjhgp... More

ingrese la descripción de la imagen aquí

 qwertzuiopölkjhgfdsayxcver wefrtzuiokjhgpswdfsfdfsafd sdfdgffdsgfg Less

Código:

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>