Problem with text that jumps lines CSS
Would anyone know how to fix this problem? I have tried everything but it doesn't work for me, if I have a choice of for example 2 words, the dropdown will not increase its size to show both words on a single line, I can use no-wrap but if I shrink the window , the text will not skip lines so that everything is visible. I'm not sure how to fix it.


6 Replies

I have tried that, but if the screen shrinks, it does not skip lines, and cannot see what else is written

Yeah that’s when you‘d need to flip the anchor position.
Libraries like floatingUI provide helpers for this.
Or you just use a unstyled component library like
https://kobalte.dev/docs/core/components/dropdown-menu
which have all those details figured out and also provide accessibility, keyboard navigation etc.
I'll take a look at it