How to detect overflow (overflow) element?

Question

JavaScript

For example, on the getbootstrap.com website, there is an adaptive menu (navbar) on top, at a certain resolution it collapses into a compact version, but sometimes it turns out that when the screen size changes, the menu content does not fit into the block (the width is larger) and moves apart in height by multiple lines. Accordingly, you need to somehow catch the overflow of the menu and, if necessary, "early" collapse into a compact version.
How to catch block overflow in width? I came up with only a variant with tracking the height of the menu, but then you have to set a fixed height for it, and this is not always convenient. Is there any way in JS/CSS to detect overflow?

Answer 1

You put one div with text in another which will be a container
. The first div has a variable size depending on the amount of text
Compare sizes with javascript