Tekst bez określonej długości w dwóch różnych działach

Question

Po pierwsze!

Składniki: dwie div y ustawienie pionowe (każdy zawiera 50% szerokości otworu macierzysty) i tekst umieścić w pierwszym div (lewo), a następnie, w razie przepełnienia w drugim (prawo). Dywaniki mają 200px wysokości.

Tekst pochodzi ze skryptu PHP, który odtwarza zmienną (<p><?php echo $foo; ?></p>), która zawiera cały tekst. W nawiasie napisałem tag <p>. DOM wygląda mniej więcej tak:

<div class="thecontainer"> 
    <div class="theleftone"> 
     <p><?php echo $avariablewithsometext; ?> </p> 
    </div> 
    <div class="therightone"> 
     <!-- everything is permitted --> 
    </div> 
</div> 

Problem: staram się osiągnąć ten cel za pomocą CSS właściwości flex, ale nie mogę znaleźć sposób, aby umieścić tekst przelewa się z pierwszego div w sekundę jeden.

Pytanie: Jak mogę umieścić przepełniony tekst w drugim dziale pozostawiając czysty skrypt PHP?

Rzeczywiste 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"> 
 
     <!-- everything is permitted --> 
 
    </div> 
 
</div>

Answer 1

można użyć CSS3 columns

.thecontainer { 
 
    width: 100%; 
 
} 
 

 
.theleftone { 
 
    background-color: lightblue; 
 
    columns: 2; 
 
} 
 

 
p { 
 
    margin: 0 
 
}

<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>