How can I react to an HTML element overflowing in CSS?

I want to show an alternative smaller element, when an element does not fit horizontaly.
I don’t want to use media queries, because afaik media queries need a fixed screen width to compare with. But I don’t know when I need to switch to the smaller element, because I don’t know how much screen width my element would need.

If that is not possible in pure CSS, is there an approach, that involves JavaScript?

If that is not feasible either, then how do web developers tackle this problem otherwise?

(I’m not a web developer. I’m a senior software developer, but I’ve done very little front end work until now.)

I want to build my own responsive navbar similar to bootstrap navbar, that switches to a burger meny, when the screen becomes to narrow. But even there I have seen, that the switching is not always accurate. (Switching happens to late to early)