0
234
ViewsPosición de NgbTooltip en la aplicación Angular
En mi aplicación Angular 2/4, uso ng-bootstrap y su componente NgbTooltip .
Supongamos el siguiente fragmento de HTML
<div class="col-sm-8 text-ellipsis" ngbTooltip="'A very long text that does not fit'" placement="top" container="body"> A very long text that does not fit </div> con CSS personalizado dado
.text-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }Todavía no estoy contento con mi implementación, tal vez alguien pueda ayudarme a encontrar una solución elegante a mi problema:
Suponga que el texto no cabe en el div , luego se truncará y se agregará con "..." como se esperaba y la información sobre herramientas se muestra en la parte superior del centro del div . Esto es bueno para este caso, pero al tener un contenido muy corto, se ve feo:
<div class="col-sm-8 text-ellipsis" ngbTooltip="'1.jpg'" placement="top" container="body"> 1.jpg </div> 
Ahora, la información sobre herramientas todavía se muestra en el centro superior del div, pero muy a la derecha del texto (porque es muy corto pero el div aún tiene el ancho completo).
Pensé que podría resolver fácilmente este problema usando un elemento span y establecer la información sobre herramientas en eso en lugar de div :
<div class="col-sm-8 text-ellipsis"> <span ngbTooltip="'A very long text that does not fit'" placement="top" container="body"> A very long text that does not fit </span> </div>Pero esta solución plantea otro problema, como se ve aquí:
El problema ahora es que el lapso se trunca, pero de hecho es más ancho que el div . La información sobre herramientas se representa en el medio del span y no en el div .
¿Alguna idea "suave" de cómo hacer esto más agradable? Agradecería mucho tu aporte.
1 answers
Answer question0
Esta es una respuesta general, pero verifique su configuración de ancho versus ancho mínimo en el div. Además, span es un elemento en línea y no tiene propiedades a nivel de bloque como el ancho. O necesita usar otro div o necesita definir el intervalo como una pantalla: bloque en línea en su CSS.
Para el div externo, establezca un ancho mínimo donde le gustaría que comenzaran a aparecer los puntos suspensivos (digamos alrededor de 150 px). Elimine la clase de puntos suspensivos de texto del div y colóquela en el intervalo. Para el elemento span, agregue un ancho de 100% y conviértalo en un bloque en línea (o simplemente use otro div)
Entonces, básicamente, terminas con algo como esto (coloqué min-width:150px en línea, pero por supuesto esto sería mejor en la hoja de estilo):
<style> .text-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; } </style> <div class="col-sm-8" style="min-width: 150px"> <div class="text-ellipsis" ngbTooltip="A very long text that does not fit" placement="top" container="body"> A very long text that does not fit A very long text that does not fit A very long text that does not fitA very long text that does not fit A very long text that does not fit </div> </div>