在两个不同divs中没有一定长度的文本

Question

第一件事情第一！

成份：二div小号水平对齐（每个都具有50％的亲本的宽度）和一些文字把在第一个div（左），然后，如果溢出，在第二个（右边）。该divs是200px高。

该文本来自一个PHP脚本，它反映了一个包含所有文本的变量（<p><?php echo $foo; ?></p>）。在括号中，我写了一个<p>标签。该DOM看起来是这样的：

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

问题：我试图使用CSS弯曲特性来实现这一目标，但我不能找到一个办法把溢出的文本从第一个div第二一。

问题：如何将溢出的文本放在第二个div中，使PHP脚本保持清洁？

实际演示：

.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

可以使用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>