How can I put elements that do not fit in the container into a separate array?

Question

JavaScript

Hello. There is an array of elements (breadcrumbs), you need to cut out elements that do not fit from the main array and push them into a separate one (for the implementation of the responsive and in general if the list is large). Can you please tell me the logic? Or maybe there are ready-made examples, alas, I did not find ...

Answer 1

Do you need a concept or what?
I can suggest the following.
Making the line not wrap to a new line (nowrap, flex, overflow)
The main wrapper with cropping (overflow)
Inside the container with elements (flex no wrap, white-space nowrap)
This way we can get the width of the wrapper and the width of the container.
If the width of the inner container is less than the wrapper, we do nothing, everything fits.
Otherwise, we check the width of the last element. If it is larger (wrapper_width - first_el_width), then the latter is too wide. Then we cut out all the internal ones from the second to the penultimate one. In the latter, we cut off the length (it is possible through css ellipsis).
If the last element is not so wide, then we count the widths of the middle elements, starting from the penultimate one, until it becomes greater than or equal to the difference in the widths of the container and the wrapper. We cut out such a number of elements.
Well, in place of the cut out elements, you can place a button with an ellipsis, by clicking on which a list of cut out elements will drop out.