Flex shrinking priority
In creating a webpage, I'd like for it to respond to display widths by overflowing in a specific way. This is my simplified HTML:
<div class="container">
<span class="left">text inside the left span</span>
<span class="right">text inside the right span</span>
</div>
Both spans should be placed horizontally next to each other, aligned to the left of the container, no wrapping. When the container gets too narrow for all of the text to fit, the left span should start to shrink, overflowing to the left with ellipsis. When it has overflown completely and the container keeps getting narrower, only then should the right span start to shrink, overflowing to the right with ellipsis.
So far I have this CSS:
.container {
display: flex;
white-space: nowrap;
}
.left {
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
flex-shrink: 10000;
}
.right {
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}
This feels like a really inelegant solution, where I try to force the left span to flex-shrink by a large factor faster than the right. The problem is that this factor cannot be infinite, so the right span also shrinks just a tiny bit, creating an ellipsis before it should start to shrink. Is there a better way to do this, that actually doesn't shrink the right span before the left one has fully shrunk?
2 Replies
have you tried using
infinite? It's a number in CSS 😄
afaik, while hacky, using a big number like that is the only way to do what you're describing, because each column isn't really aware of what the others are doing... we don't have a "shrink only when..." logicThat's too bad. Using flex-shrink: infinite; behaves the same as if it was set to 1. I guess I'll have to skip the ellipsis on the right one and just let it unnoticeably slowly overflow during the time it shouldn't. It's only the ellipsis that makes it noticeable that the right one is indeed shrinking.