Question

So let’s say I have this markup;

<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>

Which would – with accompanying CSS – yield a result like pictured below.

However, the problem occurs when the text in the first span is longer than the allotted width of the div. Regularly what happens is just normal text wrapping; the second span is bumped to the end of the second row.

However, I want this element to be just a single row. Now, of course to achieve this, you do;

white-space: nowrap;
overflow: hidden;

But then what happens is the second span disappears into oblivion, as it’s driven away by the length of the text in the first span.

What I’d want to achieve is what is pictured in the third example below. When the content of the first span is too long to be displayed, text-overflow: ellipsis; would cut the string with a dot-dot-dot, and the second span would be pushed to the very right edge (padding of the div allowing).

Essentially, the pseudo-max-width of the first span would be equal to the width of the div, excluding its padding and deducting the width of span.sticky, whatever that may be (as the content of it may vary, so the width is not set).

I don’t know if max-width is actually the way to go when approaching something like this, but it’s what I can use to best describe the behavior I want.

Is there a non-JS method of achieving this?

Answer 1

This can definitely, and should be done in CSS. Apply a fixed width and fixed height on the first span. The height keeps it from stretching to multiple lines. The .sticky span then can be positioned afterwards. This can even be made fluid, using percents or ems. Something to consider, I don’t know the context of the ‘ABC’, ‘DEF’, but they might better be applied using a :before or :after pseudo class if they’re purely visual and not structural elements.

Here’s a quick example:

div { 
    width: 200px; /* some amount that you set */
}
span:not(.sticky) { /* can use another selector, just wanted it to be exceptionally clear what i was referring to here */
    display: inline-block; /* so height and width actually take affect */
    max-width: 80%;
    height: 1em; /* so overflow hidden works and keeps text on one row */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
}
span.sticky {
    display: inline-block;
    width: 20%;
}

If you want to see this working on a live site, I did this design on moolta.com. Click on ‘make a challenge’ and open the modal to choose a friend. The li’s inside of the dropdown list are what I’m talking about. They had to become elipsis and have a button follow them, without breaking lines