In one of my projects the UX team made the proposal to keep file extensions visible during an text overflow. The ellipsis should be shown but the extension should still be visible. This seems to be a regular issue to developers. There is even a proposal at W3C for that issue.
I looked it up on the stack overflow but couldn’t find a good solution that worked as intended. Sometimes it only worked when cropped, sometimes it doesn’t seem to work at all. So, I took the time and tried it out for myself. For me it was important that the extension should shrink with the filename and stay visible if the filename is too large and is cropped. It also should be flexible if the size is changed dynamically.
It took my roughly 30 Minutes, but I think I found a good solution. Feel free to use it.