How would you dynamically hide multiple elements based on container size so it doesn't wrap ?
Let me explain with some screenshots :
I have a non predictible number of tags with random size and basically I would like to add a d-none class to all latest elements until the container is not wrapped. The last element would be a toggle button to show/hide hidden elements. The second screenshot shows what I want to avoid, container must not wrap, it must always be on one line.
It's a React project, I tried multiple things like using useRef to get the size of each tag but I can't manage to only hide latest elements.
Here is a sample of the code :
<div class="row">
<div class="col">
<span class="badge bg-white">zetze</span>
<span class="badge bg-white">fsdfdsfsd</span>
<span class="badge bg-white">fdsfdsfsd</span>
<span class="badge bg-white">gfgfgdfgdf</span>
<span class="badge bg-white d-none">gfdgdfn</span>
<span class="badge bg-white d-none">rtetret</span>
<button type="button" class="btn show-more"><i class="fe fe-plus"></i></button>
</div>
</div>To explain it with the code above, I would like my div.col element to never wrap on a second line and add d-none classes (hide them) to all child elements that exceed except the button.
Do you have an idea how to achieve this ? Any leads will be appreciated.
Well, there is no way to do CSS dependant on the extent of a span in current browsers (that i know of). At least you can prevent it from wrapping with white-space: nowrap;
So you will need JS for this, using sth like offsetWidth. I'm using Vue, so I can't give any details, but I would render the span-Elements from an array of objects that have a hidden-property, and after calculating how much space there is left you switch off the spans, which go beyond the parent div. Of course you will want data-binding to the show-more-button too, as it is not always visible. Be careful to do calculation when DOM has finally rendered. I'm sure there is a hook for that in the React-Lifecycle.