If you are using Vue.js, you can give a try to @text-middle-ellipsis/vue. It does exactly this: dynamically adapts string to a parent element every time windows size changes.