Dynamic maximum text width
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> Whatever — with the accompanying CSS — would produce the result, as shown in the image below.
However, the problem occurs when the text in the first span longer than the selected width of the div . Regularly it happens that this is the usual packaging of text; the second span goes to the end of the second line.
However, I want this element to be just one line. Now, of course, for this you do:
white-space: nowrap; overflow: hidden; But then it happens that the second span disappears into oblivion, as it is removed by the length of the text in the first span .
What I want to achieve is what is shown in the third example below. When the contents of the first span too long to display, text-overflow: ellipsis; will cut the line with a dot with a dot to dot, and the second span will be pressed on the rightmost edge ( padding of resolution div ).
Essentially, the pseudo- max-width first span will be equal to the width of the div , excluding its padding and subtracting the width of span.sticky , whatever it is (since its contents can change, so the width is not set).
I don't know if max-width is really suitable for approaching something like this, but this is what I can use to better describe the behavior I want.
Is there a way that does not support JS for this?
This can definitely and should be done in CSS. Apply a fixed width and a fixed height on the first span. Height keeps it from stretching to several lines. Then after that the .sticky array can be placed. It can even be made fluid using percentages or ems. Something to keep in mind, I don’t know the context of “ABC”, “DEF”, but they can be better applied using: before or: after a pseudo-class if they are purely visual and not structural elements.
Here is an 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 how it works on a real site, I made this project on moolta.com. Click "Make a Call" and open the modal to select a friend. What I'm talking about is inside the drop-down list. They had to become elipsis and have a button to follow them without breaking lines
<html> <head> <style> .left { max-width: 200px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .right { float: right; } </style> </head> <body> <div class="left"> <div class="right">FOO</div> Lorem </div> <br /> <div class="left"> <div class="right">FOO</div> Lorem ipsum </div> <br /> <div class="left"> <div class="right">FOO</div> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </body> </html>