inline-block element in one line with text-overflow:ellipsis for long string

Question

I want to place inline-block element right after inline element in case of need to handle very long string that has ellipsis at the end.

Example is the next:

 .container { width: 400px; overflow: hidden; text-overflow: ellipsis; } .inline-text { display: inline; } .inline-red-icon { display: inline-block; width: 20px; height: 20px; background: red; } 

 <div class="container"> <div class="inline-text"> Onelongstringonelongstringonelongstringonelongstringonelongstringonelongstring </div> <div class="inline-red-icon"> </div> </div> 

It provides well-rendered results for regular-length strings in case of single-line and multi-line:

But for very long strings the inline-block will be moved on the next line:

Here is the jsfiddle: https://jsfiddle.net/xrkpspfr/4/

I am trying to put this inline-block after last character, so it should be placed after ellipsis in the case with very long strings. But at this time I can think of only JS-based solution that should calculate the position of last character and make some manipulations with position of inline-block element. It will be even worse if you need some responsive behaviour.

Is there HTML+CSS way to put described red inline-block element after ellipsis without line-break before it?

UPDATE : There is a solution only for the case when you don't need support multi-line strings (thanks to @wadber): using white-space:nowrap; and inline-block in both cases - text block and red square. See the answer below: https://stackoverflow.com/a/39409698/2474379

Answer 1

Try to add this css rule to the .container:

white-space: nowrap;

Here the updated JSFiddle from vivekkupadhyay