Consider this HTML structure;
<div>
<span>Text one</span>
<span class="sticky">ABC</span>
</div>
<div>
<span>Some other text</span>
<span class="sticky">DEF</span>
</div>
<div>
<span>Lorem dolor sit amet lorem ipsum dolor</span>
<span class="sticky">GHI</span>
</div>
When styled with CSS, it produces a layout as shown below.
An issue arises when the content in the first span exceeds the width of the div. This usually results in the second span wrapping to a new line.
The desired outcome is to have both spans remain on a single line. One way to achieve this is by using;
white-space: nowrap;
overflow: hidden;
However, applying these properties causes the overflow text to be hidden, including the second span.
To address this, the goal is to implement an ellipsis (...) for the overflowing text and push the second span all the way to the right edge of the div (considering padding).
This essentially requires setting the maximum width for the first span equal to the total div width minus padding and the variable width of span.sticky.
While unsure if max-width is the ideal solution, it serves as a reference point for the intended behavior.
Is there a CSS-only approach to achieve this without JavaScript?