Estoy trabajando con componentes dinámicos, donde los datos que se muestran en la plantilla son desconocidos y variarán de un caso a otro. Tengo algunos paneles de expansión de tapete anidados, donde es necesario mostrar un campo de texto para las notas que se almacenaron previamente en cada panel de expansión que se está cargando.

Dado que se desconoce la longitud del texto, quiero limitar la nota que se muestra a una línea y marcar que el texto se ha desbordado con puntos suspensivos, seguido de un botón "Mostrar más" / "Mostrar menos". Tengo la funcionalidad de mostrar más/menos funcionando, pero solo quiero que este botón sea visible si el texto excede una línea, y que esté oculto si la nota, es decir, solo contiene tres palabras.

He visto que JQuery se usa a menudo para resolver problemas similares, pero dado que estoy usando Angular, JQuery no es adecuado.

Modelo:

 <div class="note-field"> <span class="note">Note: </span> <span class="note-text" [class.show]="show">{{ data.note }}</span> </div> <button class="show-button" (click)="show = !show">{{ show ? 'Show less': 'Show more' }}</button>

Componente:

 show: boolean = false;

CSS:

 .note-text { font-size: 14px; line-height: 14px; height: 14px; overflow: hidden; text-overflow: ellipsis; } .show { overflow: visible; text-overflow: none; height: auto; }

He estado analizando esto durante algunos días y una de las soluciones que probé sin éxito fue agregar la siguiente especificación de CSS:

 .show-button[overflow=visible] { display: none; }

Los puntos suspensivos también dejaron de funcionar después de implementar la funcionalidad de desbordamiento.

Sé que es algo específico, pero realmente necesito la funcionalidad para ocultar y mostrar esto solo si los datos que se cargan superan el límite especificado.