在兩個不同divs中沒有一定長度的文本

成份：二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>

來源

2017-04-26 enriquo

只是使用一個div與css列 - 它確實是你以後 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts – Pete

@Pete感謝皮特。你能舉個例子嗎？ – enriquo

只是編輯一個鏈接 - 不知道現在瀏覽器支持什麼，但我認爲它是所有最新的瀏覽器 – Pete

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

來源

2017-04-26 14:19:11 dippas

確實，只有列CSS可以管理這:) –

在兩個不同divs中沒有一定長度的文本

回答

相關問題