HTML/CSS水平文本包裝

Question

我試圖實現一些非常簡單的事情，但我無法弄清楚我做錯了什麼。我有以下html標記：JSFiddle，目標是在文字長於圖像時使文本換行，即文本應水平換行並且不超過圖像的高度。

雖然有兩個問題：我無法編輯文本，文本是從數據庫中提取的塊。

Answer 1

如果您不能刪除<br/>元素，然後將它們設置爲：

br { 
    display:none; 
} 

應該刪除它們。這是導致包裝問題的硬線斷裂的存在。

如果您可以刪除<br/>元素，那麼文本將更接近您所需的流程。但是，高度（可能是寬度）和溢出規則需要添加到包含元素，以停止圖像下的文字環繞。

HTML

<div class="footer-row-1"> 
    <a style="float: left; margin-right: 25px;" href="index.html"><img src="http://theliberalstore.com/products/media/Q-EmptyRedSlash.gif" alt=""></a> 
    <div class="textBlock"> // <--- added a container for the text block 
    <p> Some Really Really long <br /> 
text, text, text<br /> 
text, text, text<br /> 
text, text, text: <br /> 
text, text, text<br /> 
text, text,<br /> 
<br /> 
text, text, text<br /> 
text, text, text<br /> 
<br /> 
text, text, text <br /> 
text, text, text<br /> 
text, text, text<br /> 
<br /> 
text, text, text</p> 
    <p>text, text, text, text, text, text</p> 
     <p style="padding-top: 5px;" class="color-4">text, text, text, text, text, text</p> 
    </div> 
</div> 
<div class="footer-row-2"> 
    Another completely different content here 
</div>​​​ 

CSS

.footer-row-2 { 
    clear:both; 
} 

br { 
    display:none; 
} 

.textBlock { 
    width:300px; /* for demo, to force a scroll bar */ 
    height:100px; /* same as image */ 
    overflow-x:hidden; 
    overflow-y:scroll; 
}