Angular/HTML Add button after text-overflow in table cell

I have a table and some cells overflow. These <td>'s have a class that give them an ellipsis at the end. But is there a way I can add a small button/span/whatever AFTER the ellipsis?

<td #elCol ...>
<ng-container *ngIf="overflows(elCol)">
YES <!-- this is displayed when it overflows, the function works -->
</ng-container>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<button *ngIf="overflows(elCol)">
click me <!-- Can't get this to displayed because it is behind the text -->
</button>
</td>

td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 20rem;
}


Both HTML/SCSS and TS/JS solutions could be employed

Continue reading...