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

Question

首先要做的事情!

成分:两个div水平对齐(每个都有父对象的宽度的50%)和一些文本放在第一个div(左),然后,如果溢出,在第二个(右).div高200像素.

该文本来自一个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 flex属性来实现这个目标,但是我找不到一种方法来将第二个div中的溢出文本放在第二个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 列

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