How to make the right menu?

Question

HTML

Hi all! There is a page dartc.info/pn/compare.html
I can not find the answer to the question, the tab menu is a drop-down menu, a checkbox, a link on the right, if you compress the browser, then what does not fit into the screen is transferred to another line.
How to make it so that this line is rubber, like a table, and at the same time all the words that do not fit are cut off with an ellipsis ..., but at the same time everything worked, both the drop-down menu and the checkboxes.

Answer 1

The easiest and most reliable way to do this is with flexbox + play around with the text-overflow properties.
Although I'm not at all sure that the solution with cropping texts will be correct. Well, for example, what is the use of the menu if the user sees on the screen: {icon} List... + {checkbox} impressions... + First...?
In addition, if you follow the logic, then the sort select also needs an icon, otherwise it is not perceived as an independent menu item.
As a healthy criticism, let me make a remark: one of the basic rules for building an interface is violated in your layout - the lack of grouping in the menu according to the weight and purpose of the items.
Those. you have three items that are really needed for comparison (List, Filter, Sort). It is absolutely incomprehensible how the division of links joined this group, and the presence of a link to the article in the menu bar is also not indisputable, and even the alignment to the right does not save things.