There are 2 span elements inside a div that are on the same stock.

The width of the div is fixed, the width of the first and second span can vary. Moreover, their total width may exceed the width of the div block.

How to arrange the elements so that the second span is not clipped and displayed completely to the full width on the right, and the first span occupies the remaining width inside the div.

It turned out to be done like this, but it’s impossible to put them on one line: http://jsfiddle.net/5aq6dvhf/

.container { width:200px; } .left { float: left; border:1px solid; display: inline-block; overflow:hidden; max-width: 135px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .right { border:1px solid; display: inline-block; float:right; } 

    1 answer 1

     .container { width: 200px; display: flex; } .left { border: 1px solid; display: inline-block; overflow: hidden; max-width: 135px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .right { border: 1px solid; display: inline-block; white-space: nowrap; } 
     <div class="container"> <span class="left">Some text 1 Some text 1</span> <span class="right">Some text 2</span> </div> 

    • Great! Thank you very much. - holder