First of all, the first!
Ingredients : two div are horizontally aligned (each of them has 50% of the width of the parent) and some text to enter the first div (left), and then, if it overflows, in the second one (right). Divas are 200px high.
The text comes from a PHP script that echoes the variable ( <p><?php echo $foo; ?></p> ) that contains all the text. In brackets, I wrote a <p> . The DOM looks something like this:
<div class="thecontainer"> <div class="theleftone"> <p><?php echo $avariablewithsometext; ?> </p> </div> <div class="therightone"> </div> </div>
Problem: I am trying to achieve this with CSS flex properties, but I cannot find a way to put the overflowing text from the first div in the second.
Question: How can I put overflowing text in a second div, leaving PHP script clean?
Current demo:
.thecontainer{ width:100%; height:100px; overflow: hidden; display: block; } .therightone { background-color: red; width: 50%; height:100px; display: block; float:right; } .theleftone { background-color: blue; width: 50%; height:100px; display:block; float: left; }
<div class="thecontainer"> <div class="theleftone"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex </p> </div> <div class="therightone"> </div> </div>
source share