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?
<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?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
