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.