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.
No description
No description
6 Replies
SleepPolar
SleepPolarOP2mo ago
No description
Madaxen86
Madaxen862mo ago
dropdown-menu a {
...
white-space: nowrap;
}
dropdown-menu a {
...
white-space: nowrap;
}
SleepPolar
SleepPolarOP2mo ago
I have tried that, but if the screen shrinks, it does not skip lines, and cannot see what else is written
No description
Madaxen86
Madaxen862mo ago
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.
SleepPolar
SleepPolarOP2mo ago
I'll take a look at it

Did you find this page helpful?