Float left and right on same line but treat differently when spills onto second line

Take the following simple example:

https://jsfiddle.net/ds9b1gyr/

with HTML as follows:

<span style="float:left;">| this is a first part |</span>
<span style="float:right;">| this is a second part |</span>

In the jsfiddle, slide the vertical separator bar to the right, and the left part approaches the right part, remaining on the same line. This is the effect I want, so far.

But when the left and right parts meet, so that content has to spill over to the next line, I don't want the whole second part to drop to the second line in one go. What I want is for as much content in the second part as possible to remain on the first line, with the second line "spill" either being centred, or floating left, or floating right (depending on a user preference).

Is this possible with CSS?

EDIT to show example of the effect I am after:

example when not yet spilled over to next line:

enter image description here

example when spilled over to next line:

enter image description here

3 answers

  • answered 2019-10-15 15:55 Jason Is My Name

    This is possible, I would recommend still preparing the content for responsive, but this is one way you can achieve it:

    	.text-wrap {
    		word-wrap: break-word;
    		display: -webkit-box;
    		display: -moz-box;
    		display: -ms-flexbox;
    		display: -webkit-flex;
    		display: flex;
    		-webkit-flex-wrap: nowrap;
    		flex-wrap: nowrap;
    		flex-direction: row;
    		align-items: center;
    		justify-content: space-between;
    	}
    <div class="text-wrap">
    	<span>| this is a first part this is a first part this is a first part this is a first part |</span>
    	<span>| this is a second part this is a second part this is a second part this is a second part this is a second part |</span>
    </div>

    Things to note: The nowrap and the text wrap properties

    **EDIT: ** Updated answer according to feedback...

    .text-wrap {
    	display: -webkit-box;
    	display: -moz-box;
    	display: -ms-flexbox;
    	display: -webkit-flex;
    	display: flex;
    	-webkit-flex-wrap: nowrap;
    	flex-wrap: nowrap;
    	flex-direction: row;
    	align-items: center;
    	justify-content: space-between;
    }
    	.span-one {
    		word-wrap: normal;
    		white-space: nowrap;
    		text-align: left;
    	}
    	.span-two {
    		word-wrap: break-word;
    		text-align: right;
    	}
    
    @media screen and (max-width: 640px) {
    	.text-wrap {
    		-webkit-flex-wrap: wrap;
    		flex-wrap: wrap;
    	}
    		.text-wrap span {
    			width: 100%;
    			text-align: center;
    		}
    			.text-wrap span + span {
    				margin-top: 20px;
    			}
    }
    <div class="text-wrap">
    	<span class="span-one">| this is a first part this is a first part this is a first part this is a first part |</span>
    	<span class="span-two">| this is a second part this is a second part this is a second part this is a second part this is a second part |</span>
    </div>

    Hope this sets you on your way, Jason.

  • answered 2019-10-15 15:56 MistaPrime

    You can add this to your CSS:

    span {
      width: 50%;
    }
    span:last-child {
      text-align:right;
    }
    

  • answered 2019-10-15 16:08 Abhishek Tewari

    You could use CSS Flex to for your requirement.

    Update as on 16/10/2019: I am not sure if css alone can help you achieve what you ask. But with the help of jQuery, I got what you've asked. Hope this helps. :)

    $(document).ready(function(){
    var addedContent;
    var contentOneWidth=$("#span1").width()+10;
    var actedWindowWidth;
    	$(window).resize(function(){
        var spanTwoLeftDist=$("#span2").offset().left;
        if(spanTwoLeftDist<=contentOneWidth){
        	if(!addedContent){
            addedContent=$("#span2").html();
            $("#span1").html($("#span1").html()+addedContent);
            $('#result').text("inside");
            $("#span2").empty();
            $("#span1").css("flex-shrink","");
            actedWindowWidth=$(window).width();
          }
        }
        else if(actedWindowWidth && $(window).width()>actedWindowWidth){
        	if(addedContent){
          	$("#span2").html(addedContent);
            $("#span1").html($("#span1").html().replace(addedContent,""));
            $("#span1").css("flex-shrink","0");
            addedContent=null;
            actedWindowWidth=null;
          }
        }
    	});
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div style="display: flex;flex-wrap: nowrap;justify-content: space-between;">
          <span style="flex-shrink: 0" id="span1">| this is a first part |</span>
          <span id="span2">| this is a second part this is a second part this is a second part this is a second part |</span>
         
    </div>

    Update:

    Use flex-shrink:0 on the element you don't want to shrink. I have updated my code accordingly.

    Note: style="flex-basis: 200px" has been used to specify the initial width of the second span element. I provided it to display the right align effect. You may discard it as per your preference.

    Refer CSS FlexBox for more https://www.w3schools.com/css/css3_flexbox.asp

    Hope it helps you now. :)

    <!--Updated answer-->
        <div style="display: flex;flex-wrap: nowrap;justify-content: space-between;">
          <span style="flex-shrink: 0">| this is a first part |</span>
          <span style="flex-basis: 200px">| this is a second part this is a second part this is a second part this is a second part |</span>
        </div>
    
    <!--Old answer-->
    
        <div style="display: flex;flex-wrap: nowrap;justify-content: space-between;">
          <span>| this is a first part |</span><span>| this is a second part |</span> 
        </div>

    In this, the text will not spill to the next line at once.