ajp_anton
KPCKevin Powell - Community
•Created by ajp_anton on 1/15/2025 in #front-end
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?
3 replies